h5在微信中打开长按保存图片

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

我爱画页面

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

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qdm13209211861/article/details/114642159

版权

需求：

邀请好友功能，根据用户id动态生成二维码，和背景图生成为一张图，长按图片后分享给好友或保存图片。
参考地址为：https://www.jianshu.com/p/abd9e9c5ba20

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分享</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="css/mint-ui.css">
  <link href="css/share.css" rel="stylesheet" type="text/css">
  <!-- 此处的rem.js可以参考我的上一篇博客，处理华为手机不兼容问题时的js -->
  <script src="js/rem.js"></script>
  <!-- h5处理为图片的js -->
  <script src="js/html2canvas.js"></script>
</head>

<body>
  <div id="app">
    <div class="bg-box">
      <div id="newapp">
        <!-- 背景图 -->
        <img class="bg-img" src="img/share_bg.png" />
        <!-- 生成的二维码 -->
        <div class="drawn_code">
          <div id="qrcodeHide" class="qrcode-hidden"></div>
          <div id="qrcode" class="qrcode"></div>
        </div>
      </div>
      <img class="share_button" src="img/share_button.png" alt="">
      <div class="share_desc">长按保存图片或者截屏保存图片</div>
      <div class="share_desc">分享至朋友圈，邀约参与活动有大奖</div>
    </div>
    <!--生成的图片的存放容器-->
    <div class="shareImg" id="shareImg"></div>
  </div>
</body>

</html>
<!-- 生成二维码的js -->
<script src="js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js"></script>
<script src="js/MINT.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/axios-url.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      sharer: '' //分享用户的id
    },
    created() {
      this.sharer = this.getQueryParam('sharer')
      this.showQRcode()
    },
    mounted: function () {
      this.$nextTick(function () {
        this.conversion()
      })
    },
    methods: {
      // 地址栏参数获取
      getQueryParam(key, url) {
        var searchStr = url || window.location.search;
        searchStr = url ? decodeURIComponent(searchStr) : searchStr;
        searchStr = searchStr.replace(/^\?/, '');
        var params = searchStr.split('&');
        var paraObj = {};
        params.forEach(function (s) {
          var ss = s.split('=');
          ss.length && (paraObj[ss[0]] = ss[1])
        })
        return paraObj[key] !== undefined ? paraObj[key] : ''
      },
      // 将传入值转为整数
      parseValue(value) {
        return parseInt(value, 10);
      },
      //根据 window.devicePixelRatio 获取像素比
      getDpr() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
          return window.devicePixelRatio;
        }
        return 1;
      },
      // 将页面指定的dom元素转换为图片，最终实现功能
      conversion() {
        var _this = this;
        // 获取想要转换的dom节点
        var dom = document.getElementById('newapp');
        var box = window.getComputedStyle(dom);
        // dom节点计算后宽高
        var width = _this.parseValue(box.width);
        var height = _this.parseValue(box.height);
        // 获取像素比
        var scaleBy = _this.getDpr();
        // 创建自定义的canvas元素
        var canvas = document.createElement('canvas');
        // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // 设置canvas css 宽高为DOM节点宽高
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        // 获取画笔
        var context = canvas.getContext('2d');
        // 将所有绘制内容放大像素比倍
        context.scale(scaleBy, scaleBy);
        // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
        var w = document.getElementById('newapp').style.width;
        var h = document.getElementById('newapp').style.height;
        html2canvas(dom, {
          allowTaint: true,
          width: w,
          height: h,
          useCORS: true
        }).then(function (canvas) {
          // 将canvas转换成图片渲染到页面上
          var url = canvas.toDataURL('image/png'); // base64数据
          var image = new Image();
          image.src = url;
          document.getElementById('shareImg').appendChild(image);
        });
      },
      // 生成二维码
      showQRcode() {
        var qrbox = document.getElementById("qrcode")
        var url = 'https://th.li-dd.com/h5/weekMeeting/lottery.html?sharer=' + this.sharer + '&isQRcode=true'
        var qrHiddenBox = document.getElementById("qrcodeHide")
        var getqrcode = new QRCode(qrHiddenBox, url);
        //在小米或者华为手机上生成的二维码是通过canvas展示的，img标签被隐藏,所以需要特殊处理一下，将canvas标签隐藏，拿到生成的url放到img里面再展示出来
        var myCanvas = document.getElementsByTagName('canvas')[0];
        var image = new Image();
        image.src = myCanvas.toDataURL("image/png");
        //image.style.width = '320px'  此方法为解决uni-app中图片变大问题
        qrbox.append(image)
      },
    }
  })
</script>

html2canvas.js文件地址为：https://pan.baidu.com/s/1OozG5uoL4W1Lr2KcBRARMQ
提取码是 3ble
qrcode.min.js文件地址为：https://pan.baidu.com/s/14Ysw1QQ3381hogm2hO6f0g
提取码是 ncrj

注意事项：

此方法在uni-app中的h5中同样适用，只不过在uni-app中生成的图片宽度是正常图片的两倍，处理办法是，强制给图片添加宽度，是图片变小，见代码的倒数第二行。

我爱画页面

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
h5在微信中打开长按保存图片

需求：邀请好友功能，根据用户id动态生成二维码，和背景图生成为一张图，长按图片后分享给好友或保存图片。参考地址为：https://www.jianshu.com/p/abd9e9c5ba20具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分享</title> <meta name="description"
复制链接

扫一扫