长按app内区域截图利用html2Canvals保存到手机

本文介绍了一个利用JavaScript实现的长按元素截图功能,通过html2canvas将DOM元素转换为canvas,再将其保存为图片文件并自动添加到手机相册中。此功能适用于移动设备上的Web应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

gotouchstart() {

      clearTimeout(this.timeOutEvent); //清除定时器

      this.timeOutEvent = 0;

      this.timeOutEvent = setTimeout(() => {

        //执行长按要执行的内容,

        this.saveImg();

      }, 1500); //这里设置定时

    },

    //手释放,如果在2000毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件

    gotouchend() {

      clearTimeout(this.timeOutEvent);

      if (this.timeOutEvent != 0) {

        //这里写要执行的内容(尤如onclick事件)

      }

    },

    //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按

    gotouchmove() {

      clearTimeout(this.timeOutEvent); //清除定时器

      this.timeOutEvent = 0;

    },

 

 

 

 

saveImg() {

      let dom = document.getElementsByClassName("image")[0];

      if (typeof html2canvas == null) throw Error("html2canvas is not defined");

      let mixed = this.generateMixed(10);

      let fileName = "二维码截图" + mixed + ".png";

 

      var getPixelRatio = function(context) {

        var backingStore =

          context.backingStorePixelRatio ||

          context.webkitBackingStorePixelRatio ||

          1;

        return (window.devicePixelRatio || 1) / backingStore;

      };

 

      var _canvas = document.createElement("canvas");

 

      var ctx = _canvas.getContext("2d");

      var ratio = getPixelRatio(ctx);

      ctx.scale(ratio, ratio);

 

      var w = dom.offsetWidth;

      var h = dom.offsetHeight;

 

      _canvas.width = w;

      _canvas.height = h;

      _canvas.style.width = w * ratio + "px";

      _canvas.style.height = h * ratio + "px";

 

      html2canvas(dom, {

        allowTaint: false,

        logging: false,

        profile: true,

        useCORS: true,

        height: dom.scrollHeight,

        width: dom.scrollWidth

      }).then(canvas => {

        // canvas

        var dataUrl = canvas.toDataURL();

        var b = new plus.nativeObj.Bitmap("bitblmap");

 

        b.loadBase64Data(

          dataUrl,

          function() {

            /*这里一定要是_doc目录*/

            b.save(

              "_doc/" + fileName,

              { overwrite: true },

              function(object) {

                //保存到相册

                plus.gallery.save(

                  "_doc/" + fileName,

                  function() {

                    alert("图片已保存到相册");

                  },

                  function() {

                    alert("图片保存失败");

                  }

                );

              },

              function() {

                alert("图片保存失败");

              }

            );

          },

          function() {

            alert("图片保存失败");

          }

        );

      });

    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值