Detailed explanation of Canvas cross-domain escape practice

How to solve Canvas cross-domain problem? Here we record the cross-domain problems and solutions encountered during drawing using Canvas.

Let’s first look at the implementation method.

The target picture is generally composed of picture + text. Whether it is pictures of various sizes or unpredictable texts, it can be accomplished using the canvas api drawImage and fillText methods.

The basic process is as follows:

1. Get canvas context--ctx

 const canvas = document.querySelector(selector)const ctx = canvas.getContext('2d')

2. Drawing

Ignore the content on the image and directly use drawImage to draw it on the canvas.

 const image = new Image()image.src = srcimage.onload = () => { ctx.save() // Here we use the following parameters to call this.ctx.drawImage(image, dx, dy, dWidth, dHeight) this .ctx.restore()}

drawImage has 3 ways to use parameters. For specific usage, you can check the MDN documentation.

3. Obtain image data

Just call the toBlob(), toDataURL() or getImageData() method provided by the HTMLCanvasElement DOM object.

 canvas.toBlob(blob => { // blob you want}, mimeType, encoderOptions)

The default value of mimeType here is image/png. encoderOptions specifies the image quality and can be used for compression, but the mimeType format needs to be image/jpeg or image/webp.

Under normal circumstances, if we need to output the drawn image, we can call the canvas's toBlob(), toDataURL() or getImageData() method to obtain the image data. However, it is a bit embarrassing when encountering cross-domain images. The following errors may be reported:

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

or

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource .

Let’s look at the second situation first.

Access-Control-Allow-Origin

If you use certain image resources across domains and the service does not respond correctly to the Access-Control-Allow-Origin header, the following error message will be reported:

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource .

It means that cross-domain access is not allowed, then you can try to let the background modify the value of Access-Control-Allow-Origin to * or your.website, or use the same domain resource instead (think about it?).

Next, let's solve the first situation.

 img.crossOrigin = 'Anonymous'

In order to avoid user privacy leakage caused by pulling remote website information without permission (such as GPS and other information, you can search Exif for details), a security error will be thrown when calling toBlob(), toDataURL() or getImageData() of canvas:

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

If your image service allows cross-origin use (if not, see the previous article), then you should consider adding the crossOrigin attribute to the img element, that is:

 const image = new Image()image.crossOrigin = 'Anonymous'image.src = src

In this way, you can get the image data. If you can’t find it, use resources from the same domain~

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.