2016-09-25 3 views
2

私はcolor-thiefを使用して画像の色を分析しています。私はキャンバスとgetImageDataを使用しています、私は、コンソールで次のエラーメッセージを取得している:これは画像のピクセルサイズからキャンバスの問題であるかどうかはわからないCanvas&Color-Thief画像インデックスサイズ

Error: Index or size is negative or greater than the allowed amount 
[email protected]://localhost:3000/js/color-thief.js:51:12 
[email protected]://localhost:3000/js/color-thief.js:109:22 
[email protected]://localhost:3000/js/color-thief.js:75:25 
colorController/[email protected]://localhost:3000/js/ang.js:20:22 

それはいくつかのバグではだ場合別のライブラリ(私はAngularJSも使用しています)が、私は固執しています。

私は、ピクセル数が0であるという問題があると考えています.console.log行をcolor-thief.js内の次のコードに追加すると、一部の画像で「0」が表示されます。

重要なポイント - 残り、それが1280年922または2000 1333

var CanvasImage = function (image) { 
    this.canvas = document.createElement('canvas'); 
    this.context = this.canvas.getContext('2d'); 

    document.body.appendChild(this.canvas); 

    this.width = this.canvas.width = image.width; 
    this.height = this.canvas.height = image.height; 

    console.log(image.width, image.height); 

    this.context.drawImage(image, 0, 0, this.width, this.height); 
}; 

任意のアイデアのような感覚が、なぜこれが発生する可能性が作るの比率を示している>image.widthimage.heightは、一部だけの画像の場合は0を示して?

+0

私はいくつかの画像がINDEXエラーを表示する理由を理解しようとしましたが、他の画像はそうではありません。 これまでのところ、jpgやpngやファイルサイズや解像度の次元が分かれていないようです...すべてのケースには、動作する画像と動作しない画像があります。 もう1つの奇妙な事実:localhostキャッシュを掃除してページをロードすると、エラーが画像の100%で発生します。更新された場合、サイトは一部のエラーのみを表示します。これはランダムです。つまり、リフレッシュすると、どの単語がランダムに変更され、INDEXエラーの点では変更されないのでしょうか。 ご協力いただければ幸いです。 –

+3

ここで画像を関数に渡しますか?あなたはそれが起こる前にonloadイベントを待っていますか?アンロードされたイメージのサイズはゼロになります。 – rlemon

答えて

0

答えは、画像に正しく読み込むコードにimage.addEventListener("load", function() { ... }を追加することでした。

関連する問題