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

Editor to share with you how to achieve Canvas cross-domain decoupling in html5, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Realization method

The target picture is generally composed of picture and text. Whether it is a strange size of pictures, or a variety of unpredictable text, can be done with canvas api drawImage and fillText methods.

The basic process is as follows:

1. Get the canvas context-- ctx

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

2. Drawing

Ignore the contents of the picture and draw it directly on the canvas canvas with drawImage.

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

There are three ways to use parameters in drawImage. For more information, please see the MDN documentation.

3. Obtain image data

You can call the toBlob (), toDataURL () or getImageData () methods provided by the HTMLCanvasElement DOM object.

Canvas.toBlob (blob = > {/ / your blob}, mimeType, encoderOptions)

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

Canvas cross-domain

Normally, if we need to output the drawn image, we can call canvas's toBlob (), toDataURL () or getImageData () method to get the image data. However, it is a bit awkward when it comes to the cross-domain situation of pictures. The following errors may be returned:

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 take a look at the second situation.

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 message, 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.

If cross-domain access is not allowed, you can try to change the value of Access-Control-Allow-Origin to * or your.website at the backend, or use the same domain resource instead (consider it? ).

Next, let's deal with the first situation.

Img.crossOrigin = 'Anonymous'

In order to avoid the disclosure of user privacy caused by unauthorized pull of remote website information (such as GPS, you can search for Exif), 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-domain use (if not, see the above), then you should consider adding a 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 picture data. If not, change the resources of the same domain.

These are all the contents of the article "how to achieve Canvas cross-domain decoupling in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.