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

Xiaobian to share with you how to solve the problem of canvas.toDataURL() error in html5, I believe most people still do not know how, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

Error Detailed information

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

keywords

canvas.toDataURL()

crossOrigin

Access-Control-Allow-Origin

preface

Recently, I am working on a creative image synthesis tool. It is probably a similar function to generate a commodity image by splicing custom text and image information. The project uses fabric.js this artboard library. The last step is to report a long string of errors when saving the image. I searched inside and outside the wall, and the solutions given were not comprehensive. In order to avoid students stepping on the pit again, I had this article.

text

When we convert DOM 2Image, if there is an image resource in DOM, the web-server where the resource is located does not support cross-domain, saving the image will not succeed.

Therefore, when troubleshooting problems, we must first determine

Web-server allows cross-domain, we take nginx as an example, response-header must have Access-Control-Allow-Orgin:xxxx(can be *, security requirements can be customized according to the main domain name)

If img tag, add crossorigin="anonymous", if Image object, also add attribute obj.crossOrigin='anonymous'

If not, let's not put the answer out here first. Let's look at chestnuts first.

In the following chestnut we will use the method of converting Image to canvas object:

function convertImageToCanvas(image) {//Create a canvas DOM element and set its width and height to be the same as the image let canvas = document.createElement ("canvas");canvas.width = image.width;canvas.height = image.height;canvas.getContext("2d").drawImage (image, 0, 0);//In actual development, we need to transfer the base64 image code after capture to the background image server, and the server directly stores or generates an image;//so we will use toDataURLconsole.log (canvas.toDataURL ('image/jpeg'))return canvas;}

Chestnut 1

Cross-domain permission option is not set locally crossigin =anonymous,web-server Cross-domain permission option is not set:

Cross-domain permission option not set locally crossigin =anonymous,web-server Cross-domain permission option not set

canvas preservation

It works, but what if you set up a cross-domain in the code?

Chestnut 5

function setCanvas(DOMID) {let img = document.getElementById(DOMID).querySelector('img')img.crossOrigin= 'anonymous'document.body.appendChild(convertImageToCanvas(img))}

award-winning

I think the official document means that crossOrigin=anonymous must be set synchronously for the image certificate to be trusted.

This means that CORS is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.

Otherwise, cached image data will still be considered contaminated cross-source content by the canvas.

What should I do? Take the picture again, add a random number, the picture is still the same picture, but add a vest, the browser does not recognize it

Chestnut 6

function setCanvas(DOMID) {let img = document.getElementById(DOMID).querySelector('img')img.src =img.src+'? v='+Math.random()img.crossOrigin= 'anonymous'img.onload=()=>{document.body.appendChild(convertImageToCanvas(img))}}

Bingo, perfect solution

Therefore, in the development process, it is best to add a random number every time in the function code such as creating new pictures, replacing pictures, and restoring pictures to ensure that the sources are the latest and do not go to the cache.

A little more about fabric.js cross-domain configuration, see below.

let _fabricConfig = {// .... crossOrigin:'anonymous'};/* fabric object */let _fabricObj = new fabric.Canvas(id, _fabricConfig);//let imgInstance = new fabric.Image.fromURL(url + '? v='+ Math.random(), img => {}, {crossOrigin: 'anonymous'})//let currentActive = _fabricInstance.getActiveObj();currentActive.setSrc(randomURL, img =>{}, {crossOrigin: 'anonymous'}) The above is "How to solve canvas.toDataURL() error in html5" All the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to 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.