使用vue开发中一些图片保存的方法

情景一:
用原生的a标签进行下载

<a href="图片路径" download="download.png">下载图片a>
1

情景二:
下载html2canvas插件, 在页面中进行引用

import html2canvas from "html2canvas"

<img src="图片地址" ref="toast">
<span @click="download">下载图片span>

<script>
export default {
 methods: {
  download(){
     let e = this.$refs.toast;
     html2canvas(e, {
         allowTaint: true,
         useCORS: true, // 设置跨域
         tainttest: true, // 检测每张图片都已经加载完成
         backgroundColor: null, // 背景色, 转换图片可能会有白色底色，不要的话就null
     }).then((canvas) => {
         const link = document.createElement("a"); // 创建一个超链接对象实例
         link.download = "download.png"; // 设置要下载的图片的名称
         link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
         link.click(); // 触发超链接的点击事件
     });
  },
 }
}
script>
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

情景三:
当在uniapp或者小程序webview开发中, 需要保存h5页面中的图片

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>
1

.vue文件

<img :src="url" ref="toast">
<span @click="download">下载图片span>
<srcipt>
export default {
 methods: {
  download(){
    wx.miniProgram.getEnv(function (res) {
        if (res.miniprogram) {
        	wx.miniProgram.navigateTo({
                url: "小程序中的页面路径?url="+encodeURIComponent(this.url),
            });
        }
    });
  }
 }
}
srcipt>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

小程序/uniapp中的页面(此处使用uniapp)

<srcipt>
export default {
 onLoad: function(options){
 	this.download(options)
 },
 methods: {
 	download(options){
 		let url = decodeURIComponent(options.url)
 		uni.downloadFile({
			url: url ,
			success: (data) => {
				console.log('wx.env',wx.env, data)
				if (data.statusCode === 200) {
					uni.saveImageToPhotosAlbum({ //文件保存到本地
						filePath: data.tempFilePath,
						success: function(res) {
							uni.showToast({
								icon: 'success',
								mask: true,
								title: '保存成功', 
								duration: 3000,
							});
						},
						fail: (err) => {
							if(err.errMsg == "saveImageToPhotosAlbum:fail cancel"){
								uni.showToast({
									icon: 'error',
									mask: true,
									title: '取消保存', 
									duration: 3000,
								});
							}else{
								uni.hideLoading()
								uni.showModal({
									title:'如要使用保存功能，需要确认授权',
									content: '请确认授权，否则无法保存到相册',
									success:res =>{
										if (res.confirm) {
											uni.openSetting()     
										}
									}
								})
							}
						}
					});
				}
			},
			fail: (err) => {
				console.log(err);
				uni.showToast({
					icon: 'error',
					mask: true,
					title: '失败请重新保存',
				});
			},
		});
 	}
 }
}
srcipt>
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60