javascript - Blank PNGTainted canvases may not be exported (not using images) - Stack Overflow

admin管理员组

文章数量:1391977

I am trying to export a fairly simple html to canvas and then png. To do so, I am using rasterizeHTML (.js/). The problem that I am facing is that I get a warning like if I was loading an external image/resource, but I am not. This is what I have tried:

HTML:

<canvas height="500" width="500" id="rasterizer"></canvas>

Javascript

var canvas=document.getElementById("rasterizer");
rasterizeHTML.drawHTML('<div width="300px" height="300px" > <div style="width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;"><div style="width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;margin: 0;z-index: 1;background: #e4f1ea; ">            </div>            <div style="border-radius: 50%;position: absolute;top: 50%;left: 50%;z-index: 3;background: #b6cfe1;width:73.997475122531%; height:73.997475122531%; margin:-36.998737561265% 0 0 -36.998737561265%"></div>        </div></div>',canvas);
canvas.toDataURL("image/png");

The html just renders 2 circles, one above the other. Rasterizer is able to show this in the canvas with no problem, but then when I try to run .toDataURL I end up with one of two issues:

1. A blank image (if it is the first time I run the code) the same size as the canvas.
2. SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.

I am out of ideas, since this should happen with external resources, not with fully inline-d html. Anyone know why this could happen? Thanks.

I am trying to export a fairly simple html to canvas and then png. To do so, I am using rasterizeHTML (http://cburgmer.github.io/rasterizeHTML.js/). The problem that I am facing is that I get a warning like if I was loading an external image/resource, but I am not. This is what I have tried:

HTML:

<canvas height="500" width="500" id="rasterizer"></canvas>

Javascript

var canvas=document.getElementById("rasterizer");
rasterizeHTML.drawHTML('<div width="300px" height="300px" > <div style="width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;"><div style="width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;margin: 0;z-index: 1;background: #e4f1ea; ">            </div>            <div style="border-radius: 50%;position: absolute;top: 50%;left: 50%;z-index: 3;background: #b6cfe1;width:73.997475122531%; height:73.997475122531%; margin:-36.998737561265% 0 0 -36.998737561265%"></div>        </div></div>',canvas);
canvas.toDataURL("image/png");

The html just renders 2 circles, one above the other. Rasterizer is able to show this in the canvas with no problem, but then when I try to run .toDataURL I end up with one of two issues:

1. A blank image (if it is the first time I run the code) the same size as the canvas.
2. SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.

I am out of ideas, since this should happen with external resources, not with fully inline-d html. Anyone know why this could happen? Thanks.

• javascript
• html
• rasterize

Share Improve this question Follow edited Jan 14, 2014 at 12:16 rowasc asked Jan 13, 2014 at 14:04 rowascrowasc 32011 gold badge33 silver badges1010 bronze badges 1

• A fiddle trying to use this with a callback: jsfiddle/z74ad/1 – rowasc Commented Jan 14, 2014 at 12:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

There are two things at work here:

1. You should wait for rasterizeHTML.drawHTML to finish before expecting anything from the canvas:

   
   rasterizeHTML.drawHTML('<div...', canvas, function () {
       var dataUrl = canvas.toDataURL("image/png");
       console.log(dataUrl);
   });
   

2. Safari & Webkit cannot read back from the canvas once HTML (actually a SVG) has been drawn there. See https://github./cburgmer/rasterizeHTML.js/wiki/Browser-issues#wiki-webkit. A bug has been filed with both Chrome and Safari (again, see the link), but until then Firefox sadly is the only browser that allows you to read form it.

本文标签： javascriptBlank PNGTainted canvases may not be exported (not using images)Stack Overflow