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

生成分享图片

使用场景

在使用电商app时，通常有个分享给好友的功能，如果想要做分销类型，发展下线，也就是你邀请的好友是你的下级的话，就需要分享时将个人信息附带进去，因此会涉及到生成分享图片。

界面

点击上图中的“生成并保存图片”按钮，就会将图片及二维码合并成一张图片然后保存到手机本地相册。

此处的二维码是含有本人邀请码的下载app二维码。

生成分享图片功能

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

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

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

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

使用步骤

1. 引入vue组件
   
2. 使用组件
   
   此处我使用的是：插件外独立按钮触发

区别在于：
3. 保存图片按钮，我是有个背景图的，这个并不影响什么。添加click点击事件：beginCanvas
4. 注释掉 <image :src="canvasUrl" mode="widthFix"></image>
5. mosowe-canvas-image组件中，有个预览合成图的属性：showPreview，为了直接保存到本地相册，此处可以去掉此属性。

分享图片组件的预览地址：
分享图片插件预览https://www.zhonglixunqing.cn/staticHtml/uni-app-components/#/

将图片保存到本地

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:"图片保存失败"
			});
		}
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

如果是网路图片，则需要先从网络进行下载图片。也就是需要先用到这个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
						});
					}
				});
			}
		}
	});
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38