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

本文使用
使用 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);
      })

// 需要跨域请求的列表
//先把图片转为 base64,避免出现跨域问题 
// <img src="${product.store.logo}" id="ossImage1" alt="">
//<img class="img-responsive center-block" src="${product.image}" id="ossImage2"                alt="${product.title}">
      let imgList = [
        {id: '#ossImage1', value: $("#ossImage1").attr('src')},
        {id: '#ossImage2', value: $("#ossImage2").attr('src')}
      ];

      // // pamoise 初始化请求图片  
//业务需要,这里我向我将图片转译
      Promise.all(imgList.map((item) => getBas64(item.value))).then(result => {
        // 返回的图片列表,重新渲染到页面上
        result.forEach((v, k) => {
          $(imgList[k].id).attr('src', v);
        });
      });

      //保存图片
      function saveSharePic() {
        // 想要保存的图片节点
        const dom = document.getElementById("share-qr-content-body");
        // 创建一个新的canvas
        const canvas = document.createElement("canvas");
        const width = document.body.offsetWidth; // 可见屏幕的宽
        const height = document.body.offsetHeight; // 可见屏幕的高
        // console.log("可见屏幕宽高:" + document.body.offsetWidth + "、" + document.body.offsetHeight);
        const scale = window.devicePixelRatio; // 设备的devicePixelRatio
        // 将Canvas画布放大scale倍,然后放在小的屏幕里,解决模糊问题
        canvas.width = width * scale;
        canvas.height = height * scale;
        // console.log("canvas宽高:" + canvas.width + "、" + canvas.height);
        canvas.getContext('2d').scale(scale, scale);
        // dom节点绘制成canvas
        html2canvas(dom, {useCORS: true, allowTaint: true, background: '#ffffff'}).then(function (canvas) {
          const img = canvas2Image(canvas, canvas.width, canvas.height);
          img.crossOrigin = "anonymous";
          img.style.cssText = "width:100%;position:absolute;top:0px;left:0;opacity:1;z-index:200;border-radius: 15px;";
          // console.log("图片宽高:" + img.width + "、" + img.height);
          $("#share-qr-content-body").html(img);
          // document.body.appendChild(img);
        });
      }

      //利用canvas获取图片的base64编码创建图片对象
      function canvas2Image(canvas, width, height) {
        const retCanvas = document.createElement("canvas");
        const retCtx = retCanvas.getContext("2d");
        retCanvas.width = width;
        retCanvas.height = height;
        retCtx.drawImage(canvas, 0, 0);
        const img = document.createElement("img");
        img.crossOrigin = 'anonymous';
        img.src = retCanvas.toDataURL("image/jpg", 1); // 可以根据需要更改格式
        return img;
      }

      /**
       * 图片转base64格式
       */
      /**
       * @description: 图片转base64
       * @param {String} url 需要转换的图片原链接(http://....jpg)
       * @param {String} outputFormat 转换出来的图片的类型(canvas支持jpg/png格式)
       * @return: 返回图片对应的base64编码
       */
      function getBas64(url, outputFormat = 'image/jpg') {
        return new Promise(function (resolve, reject) {
          let canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d'),
            img = new Image;
          img.crossOrigin = 'Anonymous'; // 重点!设置image对象可跨域请求
          img.onload = function () {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            let dataURL = canvas.toDataURL(outputFormat);
            canvas = null;
            resolve(dataURL);
          };
          // img.src = url; // 旧的方式
          img.src = url + '?t=' + new Date().valueOf() // 防止oss的缓存问题
        })
      }
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值