19

コードで新しい ImageData オブジェクトを作成したいと考えています。Uint8ClampedArray画像オブジェクトを作成したい場合、それを行う最良の方法は何ですか?

新しいキャンバス要素を作成し、その ImageData を抽出してそのデータ属性を上書きすることもできると思いますが、それは間違ったアプローチのようです。

ImageData コンストラクターを直接使用できれば素晴らしいのですが、その方法がわかりません。

4

4 に答える 4

40

ImageDataこれは興味深い問題です...単にオブジェクトを作成することはできません:

var test = new ImageData(); // TypeError: Illegal constructor

私も試しました：

var imageData= context.createImageData(width, height);
imageData.data = mydata; // TypeError: Cannot assign to read only property 'data' of #<ImageData>

ただし、MDN dataプロパティで説明されているように、読み取り専用です。

したがって、唯一の方法は、オブジェクトを作成し、反復でデータプロパティを設定することだと思います:

var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
for(var i = 0; i < myData.length; i++){
    imageData.data[i] = myData[i];
}

更新:set ImageData のプロパティでメソッド を発見したdataので、解決策は非常に簡単です:

var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
imageData.data.set(myData);
于 2013-01-15T05:18:41.590 に答える
9

Chrome と Firefox の最新バージョンは、すでにImageDataコンストラクターをサポートしています。その定義はMDNにあります。

他のブラウザーでは、このコンストラクターを自分で作成できます。

function ImageData() {
    var i = 0;
    if(arguments[0] instanceof Uint8ClampedArray) {
        var data = arguments[i++];
    }
    var width = arguments[i++];
    var height = arguments[i];      

    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.createImageData(width, height);
    if(data) imageData.data.set(data);
    return imageData;
}

次のように使用できます。

var imgData1 = new ImageData(data, width, height);
var imgData2 = new ImageData(width, height);
于 2014-02-17T21:43:33.357 に答える
1

ImageDataコンストラクターはついに Chrome と Firefox で利用できるようになりました ( mdn の互換性テーブルを参照してください)。次の 2 つの形式があります。

var imageData = new ImageData(width, height);

UInt8ClampedArrayオブジェクトを使用してインスタンスを構築する場合data:

var imageData = new ImageData(data, width, height); // height is optional

ただし、互換性の理由から、createImageData他の回答で示されているように、キャンバス 2D コンテキストを使用することをお勧めします。

于 2014-10-04T16:17:55.297 に答える
0

方法がありcreateImageData()ます。ただし、これには既存のキャンバスのコンテキストが必要です。

var myImageData = context.createImageData(cssWidth, cssHeight);

詳しくはこちらをご覧ください。

于 2012-12-08T12:46:29.010 に答える