2016-07-24 1 views
3

ImageDataの作成に問題があります。私は、次のエラーメッセージを取得しています:ここでImageDataのバイト長が4 * widthの倍数でない

Uncaught IndexSizeError: Failed to construct 'ImageData': The input data byte length is not a multiple of (4 * width).

は、私が実行している方法である:

public setPixelData(data: Buffer, width: number, height: number) { 
    var imageData = new ImageData(new Uint8ClampedArray(data), width, height); 
    this.canvas.getContext('2d').putImageData(imageData, 0, 0); 
} 

私は、データをダンプしており、これが表示されているものです。

data = Uint8Array[632028] 
width = 720 
height = 720 

では、このエラーの原因は何でしょうか、それをどのように修正することができますか?

+0

http://google.com/search?q=632028%2F720 – Blorgbeard

+0

@blorgebeard:1 upvote: ) –

+0

私は私の計算機でそれをやったとき、私はこれを得ていました: '158007' –

答えて

0

私は同じ問題を抱えていました。明らかに、アレイのサイズは幅と高さの倍数でなければなりません。また、です。

だからあなたの場合のために:* 4 * 720 720等しい2073600

var width = 720, height = 720; 
 
var data = new ImageData(
 
    new Uint8ClampedArray(4 * width * height), 
 
    720, 
 
    720 
 
); 
 
console.log(data);

+0

あなたのコードは、空のImageDataが必要であることを暗示しているようです。その場合は、ctx.createImageData(width、height)を使用します。これは、Canvas APIをサポートするすべてのブラウザ(TypedArrayコンストラクタをサポートしていないIE9でも可能です)をサポートしています。 – Kaiido

+0

私の目標は、エラーの原因を指摘することでした。質問者が既存のデータからImageDataオブジェクトを作成したい場合は、指定された幅と高さが数式と一致するかどうかをチェックするか、それ以外の場合は 'Uint8ClampedArray.length'で計算します。私は私の答えでこれを明らかにすべきか? – Robbendebiene

+1

これを展開するには、各ピクセルの赤、緑、青、アルファ(不透明度)の配列が必要です。 – Daniel

関連する問題