Failed to execute ‘toBlob’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
The reason is that cross domain images are used, so it is a polluted canvas.
The solutions are as follows
1】 Add cross domain for image request
var image = new Image()
image.setAttribute("crossOrigin",'anonymous')
image.src = src
But maybe the server won’t let you request pictures across domains (I don’t know why), so use scheme 2
2】 Convert the requested image into Base64 for use
The code is as follows
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()
})
}
Similar Posts:
- Vue Request Error: Uncaught (in promise) [How to Solve]
- FileReader Object Error: FileReader Error: Object is already busy reading blob
- JQuery Ajax crossdomain cannot be used in IE [How to Solve]
- How to Copy Echarts Map Examples to Local vueCLI Project (Commissioning Operation)
- [Solved] Access to image at ” from origin ‘null’ has been blocked by CORS policy
- [eslint] Unexpected block statement surrounding arrow body; move the returned value immediately a…
- used in key specification without a key length
- [Solved] Changing the selected file Error when uploading excel file. Net:: err_UPLOAD_FILE_CHANGED
- The front-end XMLHttpRequest object sets an error in the request header