画布签名生成图片

来源：互联网发布：金相分析软件编辑：程序博客网时间：2024/04/27 16:05

<!doctype html> <html lang="en"> <head> <title>一款签名变成图片的插件</title> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"> <style> #c1 {background-color:pink; } </style> </head> <body> <canvas id="c1"width="400px"height="400px"> <span>该浏览器不支持canvas内容</span> </canvas> <input type="button"value="按钮"id="submit"/> <input type="button"value="清除"id="clear"/> <img id="qmimg"/> </body> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> /*插件参考地址http://www.jq22.com/jquery-info1057*/ /*移动端事件*/ var canvas= document.getElementById('c1'); var ctx= canvas.getContext('2d') canvas.addEventListener('touchstart',function (ev) { ev.preventDefault(); ctx.beginPath(); ctx.strokeStyle= 'red'; ctx.lineWidth="5"; var ev= ev.touches[0]|| window.event.touches[0]; ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop); canvas.addEventListener('touchmove',function (ev) { var ev= ev.touches[0]|| window.event.touches[0]; ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop); ctx.stroke(); }) // canvas.addEventListener('touchend',function (ev) { // canvas.onmousemove = null; // canvas.onmouseup = null; // }) }) document.getElementById('clear').addEventListener("click",function(){ canvas.width= canvas.width; }); document.getElementById('submit').addEventListener("click",function(){ $('#qmimg').attr("src",canvas.toDataURL("image/png")); }); /*pc端事件*/ canvas.onmousedown= function (ev) { ctx.beginPath(); ctx.strokeStyle= 'red'; ctx.lineWidth="5"; ctx.lineJoin= 'round'; var ev= ev || window.event; ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop); canvas.onmousemove= function (ev) { ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop); ctx.stroke(); } canvas.onmouseup= function() { canvas.onmousemove= null; canvas.onmouseup= null; }; } document.getElementById('submit').addEventListener("click",function(){ $('#qmimg').attr("src",canvas.toDataURL("image/png")); }); </script> </html>

阅读全文

0 0