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

方法"/>

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

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

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

情景二:
下载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>

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

<script src=".6.0.js"></script>

.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>

小程序/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>