uniapp 小程序分享海报保存图片踩坑

前言：第一次写的时候，思路。

1：获取权限>绘制canvas>保存canvas返回路径,canvasToTempFilePath>图片暂存downloadFile>保存图片saveImageToPhotosAlbum

但是在开发小程序开发工具中在图片暂存出现问题，因为开发工具内downloadFile正常，到了手机微信报错，因为只能下载http文件，二手机返回的是“wxfile://***”暂存路径，另就是canvas绘制的网络图片不显示，本地图片正常，所以绕了一下，先缓存网络图片。所以有了以下船新版本。

2：获取权限>图片暂存downloadFile>绘制canvas>保存canvas返回路径,canvasToTempFilePath>保存图片saveImageToPhotosAlbum

1：写入canvas

<canvas  style="width: 100%;height: 1050upx;opacity: 0;" canvas-id="myCanvas"/>
        </canvas>

<view class="Saveshare"><view class="save" @click="csss">保存收款码</view></view>

2：获取保存图片权限，一般写页面加载完成，看个人需求

wx.getSetting({
                success(res) {
                    if (!res.authSetting['scope.writePhotosAlbum']) {
                        wx.authorize({
                            scope: 'scope.writePhotosAlbum',
                            success() {
                                console.log('授权成功');
                            }
                        });
                    }
                }
            });

3：微信分享图片如果有网络图片，需暂存本地，以后再布置canvas。否则canvas图片真机测试不显示（本文图片有http图片，也有本地图片）。

csss() {
            let that = this;
            wx.downloadFile({
            url: that.list.paymentCodeUrl,//此为http图片，需先暂存本地，地址为“wxfile://***”
            success: function(res) {    }

         })     

   }                  
   4：绘制canvas

        const ctx = uni.createCanvasContext('myCanvas');
            ctx.rect(0, 0, 750, 80);
            ctx.setFillStyle('#FFFFFF');
            ctx.fill();
            let list = that.list.merchantName;
            let arr = list.split('');
            let name = '';
            let name1 = '';
            ctx.font = '28px bold 黑体';
            // 设置颜色
            ctx.fillStyle = '#000';
            // 设置水平对齐方式
            ctx.textAlign = 'center';
            // 设置垂直对齐方式
            ctx.textBaseline = 'middle';
            // 绘制文字（参数：要写的字，x坐标，y坐标）//文字需居中换行所以只能遍历折行
            if (arr.length < 12) {
                ctx.fillText(list, 200, 30);
            } else {
                for (let i = 0; i <= arr.length; i++) {
                    if (i <= 11) {
                        name += arr[i];
                    }
                }
                ctx.fillText(name, 200, 30);
                let arrs = arr.splice(12, 1);
                ctx.fillText(arrs, 200, 60);
            }
            ctx.beginPath();
            ctx.rect(0, 80, 750, 500);
            ctx.setFillStyle('#ff8b3d');
            ctx.fill();
            ctx.font = '30px bold 黑体';
            ctx.fillStyle = '#fff';
            // 设置垂直对齐方式
            ctx.textBaseline = 'middle';
            // 绘制文字（参数：要写的字，x坐标，y坐标）
            ctx.fillText('付款码', 200, 130);
            ctx.drawImage(res.tempFilePath, 65, 155, 250, 250);//网络图片已存本地
            ctx.drawImage('../../../static/img/hspics/752597618265658563.png', 70, 450, 50, 50);
            ctx.font = '18px bold 黑体';
            ctx.fillStyle = '#fff';
            // 设置垂直对齐方式
            ctx.textBaseline = 'middle';
            // 绘制文字（参数：要写的字，x坐标，y坐标）
            ctx.fillText('乐花生 扫码付款', 200, 480);
            ctx.draw();

如果想使图片居中显示，需获取屏幕宽度，减去图片宽度除以二就是距离左侧距离，

ctx.drawImage(that.list.paymentCodeUrl, (that.widths-250)/2, 195, 250, 250)

5：保存canvas，保存canvas为异步，需延时，否者绘制慢的情况下会没有图片

   setTimeout(function() {
                let that = this;
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 750,
                    height: 750,
                    destWidth: 750,
                    destHeight: 1050,
                    canvasId: 'myCanvas',
                    success: function(res) {
                                            
                    }
                });
            }, 2000);

6：保存图片

wx.saveImageToPhotosAlbum({
                                    filePath: res.tempFilePath,
                                    success: function(data) {
                                        wx.showToast({
                                            title: '保存成功',
                                            icon: 'success',
                                            duration: 2000
                                        });
                                    },
                                    fail: function(err) {
                                        if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
                                            console.log('当初用户拒绝，再次发起授权');
                                            wx.openSetting({
                                                success(settingdata) {
                                                    console.log(settingdata);
                                                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                        console.log('获取权限成功，给出再次点击图片保存到相册的提示。');
                                                    } else {
                                                        console.log('获取权限失败，给出不给权限就无法正常使用的提示');
                                                    }
                                                }
                                            });
                                        }
                                    },
                                    complete(res) {
                                    }
                                });        

至此结束，完整代码。uniapp的自己改wx.  觉得可以记得星星。

https://github.com/jmyuyu/WeChatposter