html5 canvas手写画板下载图片至本地

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>canves</title></head><body><div><canvas id="canvas" width="600" height="400"></canvas> </div><label>画笔宽度：</label><select id="sel">   <option value="4">4</option><option value="8">8</option><option value="16">16</option><option value="30">30</option></select>画笔颜色:<input type="color" name="color1" id="color1"/><br /><br /><br /><br /><input type="button" value="生成图片" onclick="generate_picture()"><input type="button" value="下载图片" onclick="download_picture()"><br><img id="image" src="" width="500px" height="200px"></body><script  type="text/javascript">var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//画一个黑色矩形ctx.fillStyle="#002200";//绘制填充颜色ctx.fillRect(0,0,600,400);//绘制一个被填充的矩形//按下标记var onoff=false;//定义起始位置var oldx=-10;var oldy=-10;//设置画笔颜色默认为白色var linecolor="white";//画笔宽度默认为4var linw=4;changeColor();//鼠标移动事件，事件绑定canvas.addEventListener("mousemove",draw);canvas.addEventListener("mousedown",down);canvas.addEventListener("mouseup",up);// 下笔时按下标记打开，给oldx、oldy赋值function down(event){console.log(event);onoff=true;oldx=event.pageX-10;oldy=event.pageY-10;}//检测鼠标离开后，按下标记关闭    function up(){onoff=false;}//画图，按下标记打开function draw(event){if(onoff==true){var newx=event.pageX-10;var newy=event.pageY-10;// 起始一条路径，或重置当前路径。ctx.beginPath();// 把路径移动到画布中的指定点，不创建线条。ctx.moveTo(oldx,oldy);// 添加一个新点，然后在画布中创建从该点到最后指定点的线条。ctx.lineTo(newx,newy);// 设置或返回用于笔触的颜色、渐变或模式。ctx.strokeStyle=linecolor;// 设置或返回当前的线条宽度。ctx.lineWidth=linw;// 设置或返回线条的结束端点样式。ctx.lineCap="round";// 绘制已定义的路径。ctx.stroke();oldx = newx;oldy = newy;// console.log(oldx);// console.log(newx);// console.log(oldy);// console.log(newy);}}     //改变下拉画笔宽度// 页面结束加载之后触发。HTML 事件window.onload=function(){var huabi=document.getElementById("sel");huabi.onchange=function(){//在元素值被改变时运行的脚本。linw=huabi.value;};//linw=huabi;};// 改变画笔颜色function changeColor(){var color1 = document.getElementById("color1");color1.onchange=function(){//在元素值被改变时运行的脚本。linecolor = color1.value; // 获得颜色赋值给画笔};//linw=huabi;};// 生成图片function generate_picture(){const dataImg = new Image();// canvas生成图片dataImg.src = canvas.toDataURL('image/png');// document.getElementById("image").src=canvas.toDataURL("image/jpg");document.getElementById("image").src=dataImg.src;//window.open("demo.htm", "height=100px, width=400px");//alert(document.getElementById("image"));};// 下载图片function download_picture(){const dataImg = new Image();dataImg.src = canvas.toDataURL('image/png');document.querySelector('#image').appendChild(dataImg)const alink = document.createElement("a");alink.href = dataImg.src;alink.download = "testImg.jpg";alink.click();}
</script><style>/* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */#canvas{cursor:crosshair;}</style>
</html>

菜鸟教程canvas介绍
https://www.runoob.com/html/html5-canvas.html
菜鸟教程canvas参考手册
https://www.runoob.com/tags/ref-canvas.html

(1)后台打印出的鼠标事件MouseEvent
鼠标事件，MouseEvent.pageX，鼠标指针相对于整个文档的X坐标；
这个属性将基于文档的边缘，考虑任何页面的水平方向上的滚动。举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。
参考网址：https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent

(2)canvas学习——toDataURL()方法#
toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；
toDataURL()方法的两个参数：toDataURL(type, encoderOptions)

type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；
encoderOptions用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

html5 canvas手写画板下载图片至本地相关推荐

flutter手写画板,保存存成图片并上传到后台服务器
1.只是一个dome,供借鉴使用,待优化图例: 2. 这个手写画板借鉴了很多的github上面的内容,基本就是用github上的内容拼凑出来的,随后我会把github上相关的链接写上去 3. 全部代 ...
手写画板实现并转化成图片
手写画板实现并转化成图片 <!DOCTYPE html> <html> <head> <title>画板实验</title><meta ...
html5实现安卓的手写功能,html5 canvas手写字代码(兼容手机端)(示例代码)
html5 canvas手写字代码(兼容手机端) 画板实验清空生成图片 var canvas,board,img; canvas = document.getElementById('myCan ...
人工智能入门第一课：手写字体识别及可视化项目（手写画板）（mnist）
人工智能入门第一课:手写字体识别及可视化项目(手写画板)(mnist),使用技术(Django+js+tensorflow+html+bootstrap+inspinia框架) 直接上图,项目效果 1 ...
可编辑手写PDF以图片形式转换为WORD
可编辑手写PDF以图片形式转换为WORD 1 需求简介 2 解决方案 2.1 方案1:导出为不可编辑PDF+PDF2WORD 2.2 方案2:PDF2JPG+JPG2PDF+PDF2WORD 2.3 ...
字体大宝库：25款很好看的手写字体下载
每个人都有自己独特的书写风格,手写字体常用于印刷.网页设计及其它创意设计任务中,能够强调设计的自然性.非正式性,让设计作品看起来更有个性.更可爱.今天这篇文章分享的好看的英文手写字体可以免费下载使用, ...
在线签名、canvas手写在线签名——小程序端实现在线签名，手写电子签名canvas
在线签名.canvas手写在线签名--小程序端实现在线签名,手写电子签名canvas 近期公司准备接一个政府的小项目,里头有一个在线签名的需求,老板让我研究一下.于是就...开始思考: 在线手写签名, ...
canvas 手写毛笔字效果
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
swift 将图片保存到本地_如何保存微博的所有图片链接并下载图片到本地
点击上方月小水长并设为星标,第一时间接收干货推送这是月小水长的第 47 篇原创干货对于一个爬虫,其爬取的目标不仅限于文字,图片.语音.视频均有可能,我开源的微博爬虫之话题爬虫,设定之初就 ...

html5 canvas手写画板下载图片至本地

html5 canvas手写画板下载图片至本地

html5 canvas手写画板下载图片至本地相关推荐

最新文章

热门文章

html5 canvas手写画板 下载图片至本地

html5 canvas手写画板 下载图片至本地

html5 canvas手写画板 下载图片至本地相关推荐

最新文章

热门文章

html5 canvas手写画板下载图片至本地

html5 canvas手写画板下载图片至本地

html5 canvas手写画板下载图片至本地相关推荐