5

HTML5 canvasのピクセルを値に変更したいと思いhslます。hslユーザーが選択した任意の値にすることができます。

キャンバスのimageDataを取得できますvar imageData = canvas.getImageData(0, 0, 200, 200);

しかし、imageData.data配列には の値が含まれていますrgba。実際には、配列内の各値はバイトなので -

data[0] = r, data[1] = b, data[2] = g, data[3] = a, data[4] = r, data[5] = b, data[6] = g, data[7] = a等

apiimageData の操作に使用できるものはありますか? api生データを抽象化して、-などdata[0] = rgba, data[1] = rgba？

そして、それには次のようなメソッドがあるかもしれません-data[0].setValueHSL(60, 100%, 50%);

この API が存在しない場合、hsl 値を作成/表現でき、その値を RGB に変換できるクラスはありますか?

4

2 に答える 2

1

このように簡単に書くことができます

parseImageData = function(imageData) {
    var newImageData = [];
    for ( var i = imageData - 1; i>0; i-4) {
        newImageData.push([ imageData[i],
                            imageData[i-1],
                            imageData[i-2],
                            imageData[i-3] ]);
    }
    return newImageData;
}

その後、元に戻したい場合

parseNewImageData = function ( newImageData ) {
    var imageData = [];
    for ( var i = newImageData - 1; i>=0; --i) {
        imageData.push( imageData[i][0] );
        imageData.push( imageData[i][1] );
        imageData.push( imageData[i][2] );
        imageData.push( imageData[i][3] );
    }
    return imageData;
}

とても簡単で、必要なことを具体的に行うことができます！

これが役立つことを願っています！

于 2014-05-29T16:14:33.040 に答える