可能无法导出空白的PNG /污染画布(不使用图像) [英] Blank PNG / Tainted canvases may not be exported (not using images)
问题描述
我正在尝试将相当简单的html导出到画布然后png。为此,我使用的是rasterizeHTML( http://cburgmer.github.io/rasterizeHTML.js/ )。
我面临的问题是我得到一个警告,就像我正在加载外部图像/资源,但我不是。
这就是我的尝试:
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
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");
html只渲染2个圆圈,一个在另一个之上。 Rasterizer能够在画布中显示这一点没有问题,但是当我尝试运行.toDataURL时,我最终遇到了两个问题之一:
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:
- 空白图像(如果是我第一次运行代码)与画布大小相同。
- SecurityError:无法在'HTMLCanvasElement'上执行'toDataURL':污染画布可能不会被导出。
我没有想法,因为这应该发生在外部资源上,而不是完全内联-d html 。
任何人都知道为什么会发生这种情况?谢谢。
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.
推荐答案
这里有两件事可以解决:
There are two things at work here:
-
您应该等待
rasterizeHTML.drawHTML
完成,然后才能从画布中获取任何内容:
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);
});
Safari&一旦在那里绘制了HTML(实际上是SVG),Webkit就无法从画布上回读。请参阅 https://github.com/cburgmer/rasterizeHTML.js /维基/浏览器的问题#维基webkit的。已经向Chrome和Safari提交了一个错误(再次,请参阅链接),但在此之前,Firefox很遗憾是唯一允许您阅读表单的浏览器。
Safari & Webkit cannot read back from the canvas once HTML (actually a SVG) has been drawn there. See https://github.com/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.
这篇关于可能无法导出空白的PNG /污染画布(不使用图像)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!