canvas实现在线签名
生活随笔
收集整理的這篇文章主要介紹了
canvas实现在线签名
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.代碼
<body><div style="margin:20px auto; text-align:center;">簽名版</div><canvas id="canvasbox" width="500" height="250"style="border:1px solid green; margin:20px auto;display:block;"></canvas><div class="btn" style="margin:0 auto; text-align:center;"><button id="savebtn">保存</button><button id="clearbtn">清空</button></div><script>var canvasbox = document.getElementById("canvasbox");var ctx = canvasbox.getContext("2d");var iscanvas = false;var offsetX = '';var offsetY = '';canvasbox.addEventListener("mousedown", function (e) {iscanvas = true;offsetX = e.offsetX;offsetY = e.offsetY;})canvasbox.addEventListener("mousemove", function (e) {if (iscanvas) {ctx.beginPath();ctx.moveTo(offsetX, offsetY)ctx.lineTo(e.offsetX, e.offsetY)ctx.lineWidth = 5;ctx.stroke()offsetX = e.offsetX;offsetY = e.offsetY;}})canvasbox.addEventListener("mouseup", function () {iscanvas = false;})canvasbox.addEventListener("mouseleave", function () {iscanvas = false;})var clearbtn = document.getElementById("clearbtn");clearbtn.addEventListener("click", function () {ctx.clearRect(0, 0, canvasbox.width, canvasbox.height)})var savebtn = document.getElementById("savebtn");savebtn.addEventListener("click", function () {downLoad(saveAsPNG(canvasbox));})function downLoad(url) {var oA = document.createElement("a");oA.download = 'download';// 設(shè)置下載的文件名，默認是'download'oA.href = url;document.body.appendChild(oA);oA.click();oA.remove(); // 下載之后把創(chuàng)建的元素刪除}// 保存成png格式的圖片function saveAsPNG(canvas) {return canvas.toDataURL("image/png"); //將圖片轉(zhuǎn)換成base64編碼// ajax提交var nameImg = canvas.toDataURL("image/png");$.ajax({url: "",type: "post",data: { "nameImg": nameImg },success: function (res) {if (res.status == 1) {window.location.href = ""}}})}// 保存成jpg格式的圖片function saveAsJPG(canvas) {return canvas.toDataURL("image/jpeg");}</script></body>2.效果
總結(jié)
以上是生活随笔為你收集整理的canvas实现在线签名的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谷歌浏览器截图
- 下一篇： 宝塔使用webhook自动部署php项目