uniapp生成分享图片(图片+二维码)，并保存到本地相册功能实现

实现

DCLOUD插件市场中，搜索“分享图”,可以看到第一个插件“canvas绘图，海报图，分享图，二维码生成”。

插件功能支持多图片绘制，多文本绘制，圆形图片绘制；支持矩形（线条）绘制；支持圆形绘制；支持二维码生成，项目用不上可以去插件内去除，毕竟这个插件携带的比较大，单纯用来生成二维码图片也是阔以的；支持绘图后预览。多用于海报图，分享图；

注意H5跨域问题及小程序白名单配置；

图片是网络图片：https://…（require及import引入不了3Kb以上的绝对路径图片，若有大神知道处理方法，望不吝赐教，谢谢！）

引入vue组件

使用组件

此处我使用的是：插件外独立按钮触发

区别在于：

1. 保存图片按钮，我是有个背景图的，这个并不影响什么。添加click点击事件：beginCanvas
2. 注释掉
3. mosowe-canvas-image组件中，有个预览合成图的属性：showPreview，为了直接保存到本地相册，此处可以去掉此属性。

将图片保存到本地

uniapp是有api可以将图片保存到本地的。

注意这个saveImageToPhotosAlbum方法中的参数filePath是图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径。

上一个步骤中分享图片功能合成图片后，返回的是本地的临时路径，因此可以直接使用此方法进行保存到本地相册。

代码：

beginCanvas() { 
    this.$refs.mosoweCanvasComponents.createCanvas();
},
_canvasImage(e) { 
    this.canvasUrl = e;
    console.log("图片",e);
    // 网络图片需要先进行下载然后直接保存到相册
    // this.saveHttpImg(e);
    // 本地图片可以直接保存到相册
    this.save(e);
    uni.redirectTo({ 
        url: `/pages/index/invite`
    });
},
saveHttpImg(url) { 
    let _t = this;
    uni.downloadFile({ 
        url: url, //仅为示例，并非真实的资源
        success: (res) => { 
            if (res.statusCode === 200) { 
                let file = res.tempFilePath;
                _t.save(file)
            }
        }
    });
},
save(url) { 
    let _this = this;
    uni.saveImageToPhotosAlbum({ 
        filePath: url,
        success: () => { 
            uni.hideLoading();
            uni.showToast({ 
                title:"图片已保存"
            });
        },
        fail: () => { 
            uni.hideLoading();
            uni.showToast({ 
                title:"图片保存失败"
            });
        }
    });
}

如果是网路图片，则需要先从网络进行下载图片。也就是需要先用到这个api：

不使用图片下载组件的处理方法

<image src="https://58d.oss-cn-hangzhou.aliyuncs.com/goods/code_1598254395000.jpg" mode="widthFix" @longtap="toSave"></image>

toSave(){ 
    uni.showModal({ 
        title: '图片保存',
        content: '确定要保存图片吗',
        success: e => { 
            if (e['confirm']) { 
                this.save();
            }
        }
    });
},
save(){ 
    uni.downloadFile({ 
        url: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/code_1598254395000.jpg", //仅为示例，并非真实的资源
        success:(res) => { 
            if (res.statusCode === 200) { 
                let file = res.tempFilePath;
                uni.saveImageToPhotosAlbum({ 
                    filePath: file,
                    success: () => { 
                        uni.hideLoading();
                        uni.showToast({ 
                            title:"已保存至相册",
                            duration:3000
                        });
                    },
                    fail: () => { 
                        uni.hideLoading();
                        uni.showToast({ 
                            title:"图片保存失败",
                            duration:3000
                        });
                    }
                });
            }
        }
    });
},

相关资料