JS长按保存canvas绘图

Good luck—dys

于 2024-04-15 20:33:43 发布

阅读量225

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_74359467/article/details/137794516

版权

实现长按页面保存的功能，可以通过JavaScript结合浏览器的事件监听和Canvas的截图方法来实现。

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body oncontextmenu="return false">
 
  <h1>长按页面保存</h1>
 
  <canvas id="myCanvas" width="400" height="200"></canvas>
 
</body>
</html>

οncοntextmenu="return false"用于禁用鼠标右键菜单。
使用了 oncontextmenu="return false" 将右键菜单禁用，以确保长按保存功能不被右键菜单影响

以下是js操作代码：

  <script>
    // 获取Canvas元素
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
 
    // 绘制图形
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 100, 100);
 
    // 监听长按事件
    let longPressTimer;
    document.addEventListener("mousedown", handleMouseDown);
    document.addEventListener("mouseup", handleMouseUp);
 
    function handleMouseDown(event) {
      if (event.button === 0) {
        longPressTimer = setTimeout(handleLongPress, 1000);
      }
    }
 
    function handleMouseUp() {
      clearTimeout(longPressTimer);
    }
 
    function handleLongPress() {
      // 创建一个链接元素
      const link = document.createElement("a");
 
      // 将Canvas转换为数据URL
      const dataURL = canvas.toDataURL();
 
      // 设置链接的href属性为数据URL
      link.href = dataURL;
 
      // 设置链接的下载属性和文件名
      link.download = "canvas_image.png";
 
      // 模拟点击链接进行下载
      link.click();
    }
  </script>

通过监听mousedown和mouseup事件，判断用户是否进行了长按操作。当鼠标按下并且持续1秒钟时，会触发handleLongPress()函数，将Canvas内容转换为数据URL，并将其作为下载链接的地址进行下载。