How to solve the cross-domain problem of canvas image getImageData and toDataURL

This article mainly introduces how to solve the cross-domain problem of canvas image getImageData and toDataURL related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this article on how to solve the cross-domain problem of canvas image getImageData and toDataURL, let's take a look.

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';'; This is the end of the article on "how to solve the cross-domain problem of canvas image getImageData and toDataURL". Thank you for reading! I believe that everyone has a certain understanding of "how to solve the cross-domain problem of canvas image getImageData and toDataURL". If you want to learn more, you are welcome to follow the industry information channel.