uni-app app生成带二维码海报保存图片 + 分享到微信

远远落后

html代码
　　　　<view style="padding-top: 100rpx;">
            <!-- <view class="tips">
                <image src="../static/fingerprint.png" mode=""></image>
                <text></text>
            </view> -->
            <view class="posterImgBox">
                <view id="poster">
                    <img class="image" :src="imageUrl" mode=""></img>
                    <uqrcode v-if="!posterImgType" class="qrCodeImg" ref="uQRCode" :text="'https://www.wm319.com?page=/pages/wcatLoin/wcatLoin@userId=' + userData.id" :size="42" />
                </view>
            </view>
            <view class="btns">
                
                <view class="shareBtn" @click="renderScript.emitData">
                    <text>保存到相册</text>
                </view>
                <view class="shareBtn" @click="shareBtn">
                    <image src="../static/weixin.png" mode=""></image>
                    <text>分享到微信</text>
                </view>
            </view>
        </view>

注： uqrcode插件在uni-app插件市场导入项目即可直接用标签方式使用

JS代码（逻辑层）// 保存图片到本地
downLoadImage(){
    let base64 = this.imageUrl;
    const bitmap = new plus.nativeObj.Bitmap("test");
    bitmap.loadBase64Data(base64, function() {
        const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
        console.log('saveHeadImgFile', url)
        bitmap.save(url, {
            overwrite: true,  // 是否覆盖
            quality: 10  // 图片清晰度
        }, (i) => {
             uni.saveImageToPhotosAlbum({
                 filePath: url,
                 success: function() {
                     uni.showToast({
                         title: '图片保存成功',
                         icon: 'none'
                     })
                     bitmap.clear()
                 }
              });
         }, (e) => {
             uni.showToast({
                 title: '图片保存失败',
                 icon: 'none'
              })
              bitmap.clear()
          });
     }, (e) => {
          uni.showToast({
              title: '图片保存失败',
              icon: 'none'
          })
          bitmap.clear()
      });
},
// 点击分享到微信
shareReachWeiXin(){
    uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "", // 跳转的地址
        title: "XXXX", // 分享的标题
        summary: "邀请你和我一起成长",
        imageUrl: "logo.png",
        success: function (res) {
            console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
        }
    });
},

　　// 接收生成的图片
　　receiveRenderData(val){
　　　　this.imageUrl = val;
　　　　this.posterImgType = true;
　　　　this.downLoadImage();

　　},

注：额外创建script建立renderjs
<script module="renderScript" lang="renderjs">
    import html2canvas from '../../utils/html2canvas.min.js';
    export default {
        data() {
            return {

            }
        },
        mounted() {},
        methods: {
            // 发送数据到逻辑层
            emitData(e, ownerVm) {
                const dom = document.getElementById('poster')
                html2canvas(dom, {
                    width: dom.clientWidth, //dom 原始宽度
                    height: dom.clientHeight,
                    scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                    scrollX: 0,
                    foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
                    useCORS: true, // 是否尝试使用CORS从服务器加载图像
                    async: false, // 是否异步解析和呈现元素
                    background: "#ffffff",
                    dpi: 300
                }).then((canvas) => {
                    // console.log(e, ownerVm);
                    // console.log(canvas)
                    // 将生产的canvas转为base64图片3
                    ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
                });

            }
        }
    };
</script>

 

来源：https://www.cnblogs.com/wtwebskill/p/15960091.html