原生js 实现cavans签名并保存、下载

最新推荐文章于 2024-08-06 11:44:45 发布

এ᭄ꦿ十二ঞ

最新推荐文章于 2024-08-06 11:44:45 发布

阅读量221

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/FANSILVLV/article/details/130845702

版权

这篇文章展示了如何利用HTML5的Canvas元素和JavaScript进行图形绘制，包括监听鼠标和触摸事件进行签字功能，清空画布，以及保存画布内容为图片。同时，文章还涵盖了屏幕适配，使Canvas全屏显示并根据窗口大小调整。

摘要由CSDN通过智能技术生成

结构和样式：

 <canvas id="canvas1">
  </canvas>
 <div style="display: flex;align-items: center;">
   <div class="clear"
     style="height: 30px;color: #fff;background-color: #F7A247;text-align: center;border-radius: 10px;margin-left: 10px;line-height: 30px;padding: 0px 10px;">
     清除画布
   </div>
   <div
     style="width: 70px;height: 30px;color: #fff;background-color: #F7A247;text-align: center;border-radius: 10px;margin-left: 10px;line-height: 30px;"
     onclick="save()">保存</div>
 </div>
 <style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

js方法：

 const canvas = document.getElementById("canvas1"); // document.getElementById：获取对 HTML 元素的引用
 const ctx = canvas.getContext("2d"); //canvas.getContext: 获取该元素的上下文——绘图将在其上呈现的对象
 // 检查支持性
  if (canvas.getContext) {
    ctx.fillStyle = "rgb(100,120,120,0.2)";
    ctx.fillRect(10, 10, 600, 400);
  } else {
    alert('您当前的浏览器不支持！');
  }
 const clear = document.querySelector(".clear");
  // 监听鼠标进入 canvas, 监听鼠标指针按下和抬起
  canvas.addEventListener('mouseenter', () => {
    // 监听鼠标指针按下
    canvas.addEventListener('mousedown', (e) => {
      // 开始绘制路径
      ctx.beginPath();
      // 设置绘制的起点为当前点击的位置
      ctx.moveTo(e.offsetX, e.offsetY);
      // 监听键盘移动事件
      canvas.addEventListener('mousemove', draw);
    });
    canvas.addEventListener('mouseup', () => {
      // 移除鼠标移动事件
      canvas.removeEventListener('mousemove', draw);
    });
  });
  // pc端 签字
  function draw(e) {
    // 绘制线
    ctx.lineTo(e.offsetX, e.offsetY);
    // 描边路径
    ctx.stroke();
  }
  //移动端签字   （这里是因为pc和移动端获取触摸、点击位置的方法不一样）
  // 监听手指按下
  canvas.addEventListener('touchstart', (e) => {
    e.preventDefault(); //适配苹果  取消默认 事件 苹果手机会弹性下滑
    // 开始绘制路径
    ctx.beginPath();
    // 设置绘制的起点为当前点击的位置
    ctx.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    // 监听手指移动事件
    canvas.addEventListener('touchmove', draw1);
  });
  canvas.addEventListener('touchend', () => {
    // 移除手指移动事件
    canvas.removeEventListener('touchmove', draw1);
  });
  // 移动端
  function draw1(e) {
    // 绘制线
    ctx.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    // 描边路径
    ctx.stroke();
  }
//清空画布事件
 clear.addEventListener('click', () => {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  });

下载：

 function save() {
    const url = canvas.toDataURL();
    console.log(url);
    // 将canvas上的内容转成blob流
    // canvas.toBlob((blob) => {
    // 获取当前时间并转成字符串，用来当做文件名
    const date = Date.now().toString();
    // 创建一个 a 标签
    const a = document.createElement("a");
    // 设置 a 标签的下载文件名
    a.download = `${date}.png`;
    a.href = url;
    // 设置 a 标签的跳转路径为 文件流地址
    // a.href = URL.createObjectURL(blob);
    // alert(blob);
    // alert(URL.createObjectURL(blob));
    // 手动触发 a 标签的点击事件
    a.click();
    a.mousedown();
    // 移除 a 标签
    a.remove();
    // });
  };

屏幕适配（获取屏幕大小 cavans画布设为满屏）

  window.onresize = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 40;
    ctx.fillStyle = "rgb(100,120,120,0.2)";
    ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
  };
  window.addEventListener('load', window.onresize)