javascript-空白PNG /污染的画布可能无法导出(不使用图像)

我正在尝试将相当简单的html导出到canvas,然后导出到png.为此,我正在使用rasterizeHTML(http://cburgmer.github.io/rasterizeHTML.js/).
我面临的问题是,我收到一条警告,例如正在加载外部图像/资源,但我没有.
这是我尝试过的：

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");

html只渲染2个圆圈,一个在另一个圆圈之上. Rasterizer可以在画布上毫无问题地显示此内容,但是当我尝试运行.toDataURL时,我遇到了以下两个问题之一：

>与画布大小相同的空白图像(如果这是我第一次运行代码).
> SecurityError：无法在“ HTMLCanvasElement”上执行“ toDataURL”：受污染的画布可能无法导出.

我没有主意,因为这应该发生在外部资源上,而不是完全内联的d-html.
有人知道为什么会发生这种情况吗？谢谢.

解决方法:

这里有两件事在起作用：

>您应该等待rasterizeHTML.drawHTML完成,然后才能从画布中获得期望：

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

> Safari和一旦在其中绘制了HTML(实际上是SVG),Webkit就无法从画布上回读.请参阅https://github.com/cburgmer/rasterizeHTML.js/wiki/Browser-issues#wiki-webkit.Chrome和Safari均已提交错误(同样,请参见链接),但在此之前,可悲的是Firefox是唯一允许您读取它的浏览器.

原文地址：https://codeday.me/bug/20191011/1892678.html