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

mac2024-05-16  31

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("图片保存失败");

          }

        );

      });

    }

最新回复(0)