The reason lies in the use of cross-domain pictures, so it is a contaminated canvas.
1) Add cross-domain for image request
var image = new Image()
image.setAttribute("crossOrigin",'anonymous')
image.src = src
But it may be possible that the server will not let you request images across domains (don’t know why), then use option 2
2) Use it by converting the requested picture into base64
code show as below
function getURLBase64(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
var blob = this.response
var fileReader = new FileReader()
fileReader.onloadend = function(e) {
var result = e.target.result
resolve(result)
}
fileReader.readAsDataURL(blob)
}
}
xhr.onerror = function() {
reject()
}
xhr.send()
})
}