canvas实现在线签名

最新推荐文章于 2024-05-23 09:24:55 发布

php_kevlin

最新推荐文章于 2024-05-23 09:24:55 发布

阅读量387

点赞数

文章标签： javascript html5 canvas

原文链接：https://blog.csdn.net/qq_43654065/article/details/118179095

版权

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';// 设置下载的文件名，默认是'download'
      oA.href = url;
      document.body.appendChild(oA);
      oA.click();
      oA.remove(); // 下载之后把创建的元素删除
    }
    // 保存成png格式的图片
    function saveAsPNG(canvas) {
      return canvas.toDataURL("image/png");  //将图片转换成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.效果

在这里插入图片描述

php_kevlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现在线签名

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" st
复制链接

扫一扫