小程序中复制链接以及图片保存到本地
1.复制链接
copyLink(url) {
uni.setClipboardData({
// data: config.downloadUrl,
data: url
success: function () {
// console.log('success');
uni.showToast({
title: "复制链接成功，请使用浏览器打开"
})
},
});
},
2.保存图片
由于在h5页面中不支持saveImageToPhotosAlbum方法，所以直接去使用标签的方法进行下载
saveImage(url) {
console.log("保存图片");
var target = document.createElement("a")
target.download = '好友邀请'
// target.href = require("../../../static/img/mine/inviteFriends.png")
target.href = url
document.body.appendChild(target)
target.click()
target.remove()
},
3.使用canvas将html页面描绘出来，再进行下载
html标签盒子添加id，用于获取相应盒子
<view class="top" id="canvasImg">
<image src="../../../static/img/mine/inviteFriends.png" mode="widthFix"></image>
<text>我的邀请码：{{code}}</text>
</view>
为按钮绑定事件
<view class="left item" @click="saveImage"></view>
逻辑处理业务js
saveImage() {
const element = document.getElementById('canvasImg')
html2canvas(element,{
allowTaint: true,
useCORS: true
}).then((canvas) => {
const imgUrl = canvas.toDataURL('image/png')
this.downloadImage(imgUrl,"邀请好友.png")
})
},
downloadImage(imgsrc,name) {
const image = new Image()
image.setAttribute("crossOrigin","anonymous")
image.onload = function() {
let canvas = document.createElement("canvas")
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext("2d")
context.drawImage(image,0,0,image.width,image.height)
const url = canvas.toDataURL("image/png")
const a = document.createElement("a")
const event = new MouseEvent("click")
a.download = name || "photo"
a.href = url
a.dispatchEvent(event)
}
image.src = imgsrc
},
