移动端 h5页面长安保存图片到手机

长按保存分享图片

最新推荐文章于 2024-03-01 17:22:45 发布

原创

最新推荐文章于 2024-03-01 17:22:45 发布 · 4.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#移动端开发 #js #html #javascript #canvas

本文介绍了一种在网页中实现长按保存图片功能的方法，通过html2canvas将DOM元素渲染为图片，并处理了图片的跨域问题。

本文使用
使用 html2canvas.min.js 插件

业务需要，这里我先将图片转译为base64,然后项html 片段替换为绘制的 img图片

// An highlighted block

//手指长按事件
      var timeOutEvent;
      document.querySelector("#share-qr-content").addEventListener("touchstart", function (e) {
   
   
        //开启定时器前先清除定时器，防止重复触发
        clearTimeout(timeOutEvent);
        //开启延时定时器
        timeOutEvent = setTimeout(function () {
   
   
          // saveSharePic();  // 长按事件 处理方法
        }, 300); //长按时间为300ms，可以自己设置
      });

      document.querySelector("#share-qr-content").addEventListener("touchmove", function (e) {
   
   
        //长按过程中，手指是不能移动的，若移动则清除定时器，中断长按逻辑
        clearTimeout(timeOutEvent);
        e.preventDefault()  /*--> 若阻止默认事件，则在长按元素上滑动时，页面是不滚动的，按需求设置吧 */
      });

      document.querySelector("#share-qr-content").addEventListener("touchend", function (e) {
   
   
        //若手指离开屏幕，时间小于我们设置的长按时间，则为点击事件，清除定时器，结束长按逻辑
        clearTimeout(timeOutEvent);
      })

// 需要跨域请求的列