11

次の行でキャンバスに描画しています。

ctx.drawImage(compositeImage, 0, 0, image.width, image.height, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);

このコードは、Safari、Chrome、Firefox (さらには google の excanvas ライブラリを使用する IE) でエラーなしで実行されました。ただし、Chrome の最近の更新により、次のエラーがスローされるようになりました。

キャッチされないエラー: INDEX_SIZE_ERR: DOM 例外 1

このコードは、描画された画像の一部またはすべてをキャンバスの外に配置することがよくありますが、ここで何が起こっているのか分かりますか?

4

4 に答える 4

20

compositeImage有効な (完全に読み込まれた) イメージを指していますか?

画像が読み込まれる前に画像を描画しようとすると、この例外が発生することがわかりました。

例えば

img = new Image();
img.src = '/some/image.png';
ctx.drawImage( img, ..... ); // Throws error

次のようなものでなければなりません

img = new Image();
img.onload = function() {
  ctx.drawImage( img, .... );
};
img.src = '/some/image.png';

画像が読み込まれたことを確認します。

于 2010-06-02T17:56:31.887 に答える
8

なんで？

ロードされる前に画像を描画すると、それが の最初の引数を解釈するために html5 2dcontext ドラフトで指定されているため、これが発生しますdrawImage()。

sw または sh 引数のいずれかがゼロの場合、実装は INDEX_SIZE_ERR 例外を発生させる必要があります。

sw, sh はソース画像の幅と高さ

@jimrの答えは良いです。これをここに追加するのが適切だと思いました。

于 2010-09-22T00:28:59.047 に答える
3

このエラーのもう 1 つの原因は、ソース イメージのサイズが大きすぎることです。それらは実際の画像の寸法を超えています。これが発生すると、IE でこのエラーが表示されますが、Chrome や Firefox では表示されません。

150x150 の画像があるとします。

var imageElement = ...;

次に、より大きなソース ディメンションを使用して描画しようとすると、次のようになります。

var sourceX = 0;
var sourceY = 0;
var sourceWidth = 200; // Too big!
var sourceHeight = 200; // Too big!
canvasContext.drawImage(imageElement, 
   sourceX, sourceY, sourceWidth, sourceHeight, // Too big! Will throw INDEX_SIZE_ERR
   destX, destY, destWidth, destHeight);

これにより、IE で INDEX_SIZE_ERR がスローされます。(この記事の執筆時点で最新の IE は IE11 です。)

修正は、単にソース ディメンションを制約することです。

var sourceWidth = Math.min(200, imageElement.naturalWidth);
var sourceHeight = Math.min(200, imageElement.naturalHeight);

malloc4k の答えはこれをほのめかしましたが、彼は image.width がゼロだったからだと示唆しました。画像の幅がゼロであることがIEのエラーの原因であるとは限らないため、この新しい回答を追加しました。

于 2015-06-09T17:25:41.460 に答える
1

drawImage()私の経験上、IE (バージョン 10 であっても) の INDEX_SIZE_ERR は、不適切なクリップ サイズで操作されたキャンバス上で操作している場合に発生する可能性があります。

また、画像を動的にロードした場合、 と の値は である可能性が高い image.width ためimage.height、==0呼び出しています

ctx.drawImage(compositeImage, 0, 0, 0, 0, ...

私の場合、（うまくいった）解決策は、代わりにimage.naturalWidthandを使用することでした。image.naturalHeight

于 2014-03-05T14:13:34.537 に答える