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

What are the knowledge points of this article "what are the methods of exporting cross-domain pictures in html5?" most people do not understand, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the methods of exporting cross-domain pictures in html5".

The details are as follows:

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

The above error is believed to have been encountered when you use canvas to export pictures in toDataUrl. The domain name of the image server is different from the current one, because the security policy does not allow cross-domain export of pictures.

There are many ways to solve this problem.

First, convert pictures to base64

As soon as the picture becomes base64, there is no domain name. Naturally, there is no cross-domain.

Note: convert the picture to base64 and increase the image file size. If the picture is large, it is not recommended to convert base64, otherwise it will increase the loading time of the web page and affect the speed of the website. This method is generally suitable for small images.

Second, the image server setting allows cross-domain

That is, the response header returned from the request image contains an Access-Control-Allow-Origin cut value of * (allows cross-domain requests for all websites) or the current website domain name (only cross-domain requests under fixed domain names are allowed), and then the frontend sets the cross-domain attribute img.crossOrigin= "anonymous" of the image when loading the image. The specific code is as follows:

Var canvas = document.getElementById ('myCanvas') var ctx = canvas.getContext (' 2d') var img = document.createElement ('img') img.crossOrigin= "anonymous" img.src =' https://cache.yisu.com/upload/information/20220118/474/143274.jpg' img.onload = function () {ctx.drawImage (img,0,0500300); console.log (canvas.toDataURL ())}

In this way, the cross-domain problem can be easily solved.

3. Put the picture under the current domain name

Forgive me for smiling unkindly, but this is indeed a solution to the problem.

BUT pictures in actual projects are usually stored on cdn, so this approach is not realistic?

As soon as the picture becomes base64, there is no domain name. Naturally, there is no cross-domain.

4. When the picture service cannot set the cross-domain response header

There is indeed this situation, such as getting the profile picture of a third-party website, such as Wechat avatar, and then the front end dynamically generates a new picture. Wechat avatar image does not allow cross-domain export, what to do? None of the above methods work.

This situation requires the assistance of the backend. The backend does a layer of forwarding, and the server gets the profile picture, converts it to the base64 and returns it to the front end, or stores it on a local server that allows cross-domain, produces a new image link and returns it to the front end. At this time, combined with method one or method two, the cross-domain problem will be solved naturally.

If you use the htmlToCanvas plug-in to export images, you need to add useCORS: true configuration items, the principle is the same as method 2, of course, the prerequisite is that the image domain name is allowed to cross-domain

The above is about the content of this article on "what are the methods of exporting cross-domain pictures in html5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.