Introduction to Canvas cross-domain solution

This article brings you an introduction to the Canvas cross-domain solution. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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.

Implementation method

The target image is generally composed of image 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:

Get the canvas context--ctx

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

Drawing

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

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // 这里我们采用以下参数调用
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

drawImage has 3 ways to use parameters. For specific usage, please see the MDN documentation.

Get image data

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

canvas.toBlob(blob => {
    // 你要的 blob
}, 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.

Canvas cross-domain

Under normal circumstances, if we need to output the drawn image, we can call the toBlob(), toDataURL() or getImageData() method of canvas to obtain the image data . However, it is a bit embarrassing when encountering cross-domain images. The following error 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 information, 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), when calling canvas's toBlob( ), toDataURL() or getImageData() will throw a security error:

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

If your image service allows cross-domain use (if not, see the previous article), then you should consider adding On the crossOrigin attribute, 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, try changing resources from the same domain~

The above is the detailed content of Introduction to Canvas cross-domain solution. For more information, please follow other related articles on the PHP Chinese website!