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

向右看齐 2021-07-25 21:15 3270阅读 0赞

# 生成分享图片 #

#### 使用场景 ####

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

#### 界面 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
点击上图中的“生成并保存图片”按钮，就会将图片及二维码合并成一张图片然后保存到手机本地相册。

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

# 生成分享图片功能 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
DCLOUD插件市场中，搜索“分享图”,可以看到第一个插件“canvas绘图，海报图，分享图，二维码生成”。

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

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

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

#### 使用步骤 ####

1.  引入vue组件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]
2.  使用组件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]  
    此处我使用的是：插件外独立按钮触发

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]  
区别在于：  
3. 保存图片按钮，我是有个背景图的，这个并不影响什么。添加click点击事件：beginCanvas  
4. 注释掉  
5. mosowe-canvas-image组件中，有个预览合成图的属性：showPreview，为了直接保存到本地相册，此处可以去掉此属性。

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

# 将图片保存到本地 #

uniapp是有api可以将图片保存到本地的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 5]  
注意这个`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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 7]

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

`<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
    						});
    					}
    				});
    			}
    		}
    	});
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/be7b8945b01647b58c2ce68e31e838fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/6dfa9aa221494ac39eba66d8e61b0fe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/9c65f51c51f94b64b13534b14e428644.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/9ea02206a95c4fe28183e6efe7ef95af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/5d92a5402a4d457c9a3eeeb4e355f327.png
[https_www.zhonglixunqing.cn_staticHtml_uni-app-components]: https://www.zhonglixunqing.cn/staticHtml/uni-app-components/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/712e040c90114940a5da2aee28f908f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210725/402dd55834f44436bf1eb39ed4791597.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20210725/4f317dd105cd4c308b8398840c7aaaf6.png