9

html2canvasを使用してキャンバス上のdivを変換しています。このような：

<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/html2canvas/html2canvas.js"></script>
...
<body id="body">
  <div id="demo">
    ...
  </div>
</body>
<script>
$('#demo').html2canvas({
onrendered: function( canvas ) {
  var img = canvas.toDataURL()
  window.open(img);
}
});
</script>

html2canvas.jsで次のエラーが発生します："Uncaught Error：IndexSizeError：DOM Exception 1"：

ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );

誰かが何が起こっているのかについて考えていますか？

4

4 に答える 4

20

drawImageキャンバスを呼び出して画像をトリミングしたいときはいつでも、9 つの値を渡す必要があります。

ctx.drawImage(
imageObject,
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight);

今、それはたくさんのものです！間違いを犯すのは本当に簡単です。エラーを避けるために、画像をトリミングするときに drawImage がどのように機能するかを説明しましょう。

一枚の紙に正方形を描くことを想像してください。描画している正方形の左上隅は、sourceXピクセルとsourceYピクセルの位置にあり、0 は紙の左上隅です。描画している正方形のピクセル単位の寸法は、 と で定義されsourceWidthますsourceHeight。

定義した正方形の内側のすべてが、キャンバス内の位置 (ピクセル単位)destXとdestY(0 はキャンバスの左上隅) でカット アンド ペーストされます。

私たちは現実の世界にいるわけではないため、切り取った正方形は引き伸ばされ、異なる寸法になる場合があります。これが、定義destWidthと定義も必要な理由です。destHeight

これは、これらすべてをグラフィカルに表現したものです。

なし

質問に戻ると、Uncaught Error: IndexSizeError: DOM Exception 1通常、カットしようとしている正方形が実際の紙よりも大きい場合、または紙が存在しない位置で紙をカットしようとしている場合に表示されますsourceX = -1(これは明らかな理由で不可能です)。

が何bounds.leftであるかはわかりませんbounds.topが、他のものはそうですが、それらが間違った値であることは 99.9% 確信しています。それらを試してconsole.log、提供している画像オブジェクト (この場合はキャンバス) と比較してください。

console.log(canvas.width);
console.log(canvas.height);
console.log(bounds.left);
console.log(bounds.top);
ecc....
于 2013-03-11T01:05:59.577 に答える
9

これはhtml2canvasバグレポートです。

html2canvas.js ファイルにパッチを適用することで、 Uncaught Error: IndexSizeError: DOM Exception 1を修正できました。

これを置き換えます：

ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);

これで：

var imgData = canvas.getContext("2d").getImageData(bounds.left, bounds.top, bounds.width, bounds.height);
ctx.putImageData(imgData, 0, 0);
于 2014-01-10T15:12:55.267 に答える
7

おそらく、コンテンツの高さが優れているのにコンテナの高さが0になるfloat属性または位置がdivにあると思います。html2canvasはコンテナよりも大きなコンテンツを処理できないfixedため、以前はこの問題が発生していました。たとえば、次のようなものがあるとします。

<div>
  <img url="..." style="float: right;">
</div>

html2canvasdivは高さが 0 であるのに が大きいため、このエラーが発生しますimg。可能性のある修正は、div の高さを画像の高さよりも高くすることです。

詳細な回答をくれたSaturnixに感謝します。どこから来たのかを知るのに役立ちました。

これがお役に立てば幸いです。

于 2013-03-29T10:46:15.210 に答える