Tag Archives: error canvas Failed to execute ‘toBlob’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

error – canvas- Failed to execute ‘toBlob’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

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()
  })
}