JS长按保存canvas绘图

代码真的养发

于 2023-11-26 10:36:17 发布

阅读量668

点赞数 9

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_71966801/article/details/133704698

版权

实现长按页面保存的功能，可以通过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，并将其作为下载链接的地址进行下载。

代码真的养发

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS长按保存canvas绘图

实现长按页面保存的功能，可以通过JavaScript结合浏览器的事件监听和Canvas的截图方法来实现。oncontextmenu="return false"用于禁用鼠标右键菜单。将右键菜单禁用，以确保长按保存功能不被右键菜单影响。
复制链接

扫一扫