Summary of problems and solutions encountered when Canvas images cross domains

The content of this article is a summary of the problems and solutions encountered in cross-domain Canvas images. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Although you can use Canvas without CORS Use pictures in canvas, but this will pollute the canvas. Once the canvas is contaminated, you cannot read its data. For example, you can no longer use canvas's toBlob(), toDataURL() or getImageData() methods, calling them will throw a security error. This mechanism can avoid user privacy leakage caused by pulling remote website information without permission.

The image in the HTML specification has a crossorigin attribute. Combined with the appropriate CORS response header, you can use the image of the cross-domain element in the canvas.

##anonymousN/ASame as aboveSupport rendering, supportuse-credentialsN/ASame as aboveSupports rendering, does not support

crossOrigin/CORS	Same domain	No CORS across domains	CORS across domains
default	Supported	Supported rendering, not supported toDataURL	Supported rendering, not SupporttoDataURL
			toDataURL
			toDataURL

Summary: Canvas can render cross-domain images normally, but when the cross-domain image does not set a cross-domain response header or does not set crossOrigin = 'anonymous', use canvas.toDataURl will throw the following error:

Chrome

crossOrigin is not set

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Image.img.onload...

Cross-domain

Access to Image at 'http://localhost:3001/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

crossOrigin=use-credentials## is set #

Access to Image at 'http://localhost:3002/canvas.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access.

Safari/Firefox

crossOrigin is not set

SecurityError: The operation is insecure.

Cross domain

[Error] Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://192.168.3.99:3000 is not allowed by Access-Control-Allow-Origin. (canvas.jpg, line 0)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

corssOrigin=use is set -credentials

[Error] Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
[Error] Failed to load resource: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true. (canvas.jpg, line 0)
[Error] Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Test example

1. Start the server

npm start：Start the server

npm run start:corsdisable：Start the cross-domain image server

npm run start:corsable：Start the cross-domain-CORS image server

2. Visit http://localhost:3000

Other questions

1. There are compatibility issues with cossOrigin

For browsers that do not support cossOrigin (IE 10 and below are not supported, Android 4.3 and below are not supported) you can use XMLHttprequest and URL.createObjectURL() for compatibility, refer to the test Example Ajax solves the cross-domain problem of Canvas images.

2. Why not use images from the same domain?

Current front-end development generally places static resources on CDN, such as Alibaba Cloud or Tencent Cloud Services, and there will be a dedicated domain name to access these resources.

The above is the detailed content of Summary of problems and solutions encountered when Canvas images cross domains. For more information, please follow other related articles on the PHP Chinese website!