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 を実行しようとすると、次の 2 つの問題のいずれかが発生します。

  1. キャンバスと同じサイズの空白の画像 (コードを初めて実行する場合)。
  2. SecurityError: 'HTMLCanvasElement' で 'toDataURL' を実行できませんでした: 汚染されたキャンバスはエクスポートされない可能性があります。

これは完全にインライン化されたhtmlではなく、外部リソースで発生するはずなので、私はアイデアがありません。なぜこれが起こるのか誰にも分かりますか？ありがとう。

4

1 に答える 1

3

ここでは、次の 2 つのことが行われています。

  1. rasterizeHTML.drawHTMLキャンバスから何かを期待する前に、終了するまで待つ必要があります。

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

  2. Safari と Webkit は、HTML (実際には SVG) がキャンバスに描画されると、キャンバスから読み戻すことができません。https://github.com/cburgmer/rasterizeHTML.js/wiki/Browser-issues#wiki-webkitを参照してください。Chrome と Safari の両方でバグが報告されています (リンクを参照してください)。

于 2014-01-26T11:02:23.080 に答える