Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to solve the cross-domain problem of canvas pictures in html5". In the daily operation, I believe many people have doubts about how to solve the cross-domain problem of canvas pictures in html5. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to solve the cross-domain problem of canvas pictures in html5". Next, please follow the editor to study!

First, the image server needs to be configured with Access-Control-Allow-Origin

In general, teams have a dedicated domain name to place static resources. For example, Tencent is gtimg.com, Baidu is bdimg.com;, or many teams use Tencent Cloud or Aliyun services.

The domain name of the main page is often different. When you need to perform getImageData () or toDataURL () operations on canvas images, cross-domain problems arise, and there is more than one layer of cross-domain problems.

First, in the first step, the image server needs to configure Access-Control-Allow-Origin information, such as:

For example, PHP adds response header information, and * wildcard indicates that any domain name is allowed:

Header ("Access-Control-Allow-Origin: *")

Or specify a domain name:

Header ("Access-Control-Allow-Origin: www.zhangxinxu.com")

At this point, Chrome browsers will not have Access-Control-Allow-Origin-related error messages, but there will be other cross-domain error messages.

Second, the cross-domain problem of canvas picture getImageData cross-origin.

Cross-domain images can be drawn using canvas's drawImage () API as long as they can be displayed normally on a web page. But if you want to go further and get the complete pixel information of the picture through the getImageData () method, you will probably make an error.

For example, use the following code to get your profile picture information on github:

Var canvas = document.createElement ('canvas'); var context = canvas.getContext (' 2d'); var img = new Image (); img.onload = function () {context.drawImage (this, 0,0); context.getImageData (0,0, this.width, this.height);}; img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

The result displays the following error in the Chrome browser:

Uncaught DOMException: Failed to execute 'getImageData' on' CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

The Firefox browser error is:

SecurityError: The operation is insecure.

If you are using the canvas.toDataURL () method, you will report:

Failed to execute 'toDataURL' on' HTMLCanvasElement': Tainted canvased may not be exported

In fact, the reason is the same, cross-domain causes.

Is there any way to solve this problem?

You can try the crossOrigin property.

Third, HTML crossOrigin attribute solves the cross-domain problem of resources.

In HTML5, some elements provide attributes that support CORS (Cross-Origin Resource Sharing) (cross-domain resource sharing). These elements include

, etc., and the property name provided is the crossOrigin property.

Therefore, the above cross-domain problem can be dealt with as follows:

Var canvas = document.createElement ('canvas'); var context = canvas.getContext (' 2d'); var img = new Image (); img.crossOrigin =''; img.onload = function () {context.drawImage (this, 0,0); context.getImageData (0,0, this.width, this.height);}; img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

Just add an img.crossOrigin ='', although the JS code sets an empty string here, the property value that actually works is anonymous.

CrossOrigin can have the following two values:

Keyword interprets cross-domain resource requests for anonymous elements that do not require credential flag setting. The cross-domain resource request for the use-credentials element requires the credential flag to be set, which means that the request needs to provide credentials.

Where, as long as the attribute value of crossOrigin is not use-credentials, all will be resolved to anonymous, including empty strings, including characters such as' abc'.

For example:

Img.crossOrigin = 'abc';console.log (img.crossOrigin); / / the result is' anonymous'

It is also important to note that although there is no crossOrigin attribute, and setting crossOrigin= "use-credentials" will report cross-domain errors by default, they are different in nature.

CrossOrigin compatibility

Both IE11+ (IE Edge) and Safari,Chrome,Firefox browsers are supported. IE9 and IE10 will report SecurityError security errors, as shown below:

4. Why can the crossOrigin attribute solve the cross-domain problem of resources?

Instead of telling the other server, crossOrigin=anonymous, you don't need to bring any non-anonymous information. For example, cookie, so the current browser must be secure.

Just like you want to go to someone's house to get a dress, crossOrigin=anonymous is opposite to tell the other person, I just want clothes and nothing else. If not, maybe the other party put a bug in his clothes or something, it will not be safe, and the browser will stop it.

5. What if the IE10 browser does not support crossOrigin?

When we ask for a picture, we save the country not directly through new Image (), but with the help of ajax and URL.createObjectURL () methods.

The code is as follows:

Var xhr = new XMLHttpRequest (); xhr.onload = function () {var url = URL.createObjectURL (this.response); var img = new Image (); img.onload = function () {/ / then you can use canvas to do whatever you want with img. Code. / / remember to free memory URL.revokeObjectURL (url);}; img.src = url;}; xhr.open ('GET', url, true); xhr.responseType =' blob';xhr.send ()

This method is supported not only by IE10 browsers OK, but also by browsers that originally support crossOrigin.

Just take one more ajax request, it's okay!

According to practice, it is found that in IE browsers, if the requested image is too large, a few thousand pixels, the image will fail to load, which I guess exceeds the blob size limit.

At this point, the study on "how to solve the cross-domain problem of canvas pictures in html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.