2

我正在尝试将一个相当简单的 html 导出到画布，然后导出 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 时，我最终遇到了两个问题之一：

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

我没有想法，因为这应该发生在外部资源上，而不是完全 inline-d html。有谁知道为什么会发生这种情况？谢谢。

4

1 回答 1

3

这里有两件事在起作用：

  1. 您应该等待rasterizeHTML.drawHTML完成，然后再期待画布上的任何内容：

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

  2. 一旦在画布上绘制了 HTML（实际上是 SVG），Safari 和 Webkit 就无法从画布中读取。请参阅https://github.com/cburgmer/rasterizeHTML.js/wiki/Browser-issues#wiki-webkit。Chrome 和 Safari 都已经提交了一个错误（再次，请参见链接），但在此之前，遗憾的是 Firefox 是唯一允许您阅读它的浏览器。

于 2014-01-26T11:02:23.080 回答