[英]Blank PNG / Tainted canvases may not be exported (not using images)
I am trying to export a fairly simple html to canvas and then png. 我正在尝试将相当简单的html导出到canvas,然后导出到png。 To do so, I am using rasterizeHTML ( http://cburgmer.github.io/rasterizeHTML.js/ ).
为此,我正在使用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: 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");
The html just renders 2 circles, one above the other. html只渲染2个圆圈,一个在另一个圆圈之上。 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:
Rasterizer可以在画布上毫无问题地显示此内容,但是当我尝试运行.toDataURL时,我遇到了以下两个问题之一:
I am out of ideas, since this should happen with external resources, not with fully inline-d html. 我没有主意,因为这应该发生在外部资源上,而不是完全内联的d-html。 Anyone know why this could happen?
有人知道为什么会发生这种情况吗? Thanks.
谢谢。
There are two things at work here: 这里有两件事在起作用:
You should wait for rasterizeHTML.drawHTML
to finish before expecting anything from the canvas: 您应该等待
rasterizeHTML.drawHTML
完成,然后才能从画布中获得期望:
rasterizeHTML.drawHTML('<div...', canvas, function () { var dataUrl = canvas.toDataURL("image/png"); console.log(dataUrl); });
Safari & Webkit cannot read back from the canvas once HTML (actually a SVG) has been drawn there. 一旦在其中绘制了HTML(实际上是SVG),Safari和Webkit就无法从画布中读取内容。 See https://github.com/cburgmer/rasterizeHTML.js/wiki/Browser-issues#wiki-webkit .
参见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.
Chrome和Safari均已提交了错误(再次请参见链接),但在此之前,可悲的是Firefox是唯一允许您读取它的浏览器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.