方法一
downloadIamge(url, name) {
var _this = this
var canvas = document.createElement('canvas')
var img = document.createElement('img')
img.onerror = function() {
var timeStamp = +new Date()
_this.downloadIamge(url + '?' + timeStamp, name)
}
img.onload = function(e) {
canvas.width = img.width
canvas.height = img.height
var context = canvas.getContext('2d')
context.drawImage(img, 0, 0, img.width, img.height)
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height)
canvas.toBlob((blob) => {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = name
link.click()
}, 'image/png')
}
img.setAttribute('crossOrigin', 'Anonymous')
img.src = url
}
方法二(下载不稳定还是要加入方法一中的img.onerror)
download(imgsrc, name) {
var image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function() {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png')
var a = document.createElement('a')
var event = new MouseEvent('click')
a.download = name || 'photo'
a.href = url
a.dispatchEvent(event)
}
image.src = imgsrc
},