前端通过后端返回的url下载图片方法:
1.a标签下载方式:
<div class="code-info">
<img :src="data.qrCode" alt>
<a :href="data.qrCode" download="" target="_blank">下载</a>
</div>
downloadPicture(imgSrc, name) {
const image = new Image()
// 解决跨域Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.src = imgSrc
image.onload = () => {
const 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)
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.download = name || 'photo'
a.href = url
a.click()
a.remove()
// 用完释放URL对象
URL.revokeObjectURL(url)
})
}
}