キャンバス画像処理

Canvas は JavaScript を通じて 2D グラフィックを描画します。キャンバスはピクセルごとにレンダリングされます。キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

canvasはピクセルの基本的な処理操作を実装します

// ピクセルデータを取得します
var Canvas = document.getElementById('CanvasElt');
var ctx = Canvas.getContext('2d');
// Canvasのピクセル情報を取得しますで、
//x はコピーが開始される左上隅の x 座標です。
//y コピーを開始する左上隅の y 座標。
//width コピーされる長方形領域の幅。
//heightコピーされる長方形領域の高さ。
var CanvasData = ctx.getImageData(x, y, Canvas.width, Canvas.height);
// ピクセル情報を書き込む
ctx.putImageData(canvasData, 0, 0);
取得した CanvasData オブジェクトには以下のメンバーが含まれます。データ配列の構造は大まかに次のようになります。行ごとに格納され、列点は 4 つの添字を占めます。これは RGBA です (ここでの y は (下位))。順方向)、RGBA は data[(ywidth+x)4]、data[(ywidth+x)4+1]、data[(ywidth+x)4+2]、data[(ywidth+x)4 +3 ]。 ピクセルを取得できれば、ピクセルを操作できます。最も簡単な方法は、各フェーズの r、g、b を加算して平均することです。 、そしてそれらをそれぞれ r、g、b に割り当てます。
//グレースケール処理
function grey() {

var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
for(var i = 0; i < imageData.data.length; i += 4) {
var avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
    imageData.data[i] = avg; // red
    imageData.data[i + 1] = avg; // green
    imageData.data[i + 2] = avg; // blue
    imageData.data[i + 3] = 255; //alpha
}
ctx1.putImageData(imageData, 0, 0);

}
ピクセルの否定: 255 は対応する rgb 値を減算し、それを元の RGB 値に割り当てます。元の rgb 値はランダムに加算または減算されます。値は乱数です。では、コントラストが変化した写真やぼやけた写真を取得したい場合はどうすればよいでしょうか? コンボリューション カーネル: 画像処理の分野で最も一般的に使用されるコンボリューション カーネルは、以下の図に示すように、いわゆる行列のコンボリューションです。赤いボックス内の値を計算するときは、まず周囲の緑色の 8 つの数値を抽出します。次に、適用された行列内の対応する位置を乗算し、その積を加算して最終値を取得します。

例: (40 x 0)+(42 x 1)+(46 x 0)+ (46 x 0)+(50 x 0)+(55 x 0)+ (52 x 0)+(56 x 0 )+(58 x 0)= 42 では、どうすればぼやけた画像を取得できるでしょうか?画像のピクセルと行列 [1,1,1,1,1,1,1,1,1] は、コンボリューション カーネルを見つけるために使用されます。このときのピクセルは 255 を超える可能性があるため、基数で割ります。得られる画像はぼかしフィルターを使用した画像です。 1. 白い画像の明るさを上げます。 2. 黒を暗くして、最小の明るさを下げます。 0,3,0,0 ,0,0] コンボリューション カーネル。255 を超えて、適切な基数 150 を減算することもできます。次に、コンボリューション カーネル関数が必要です。関数の最初のパラメーターは、上の imageData オブジェクトです。キャンバスであり、2 番目のパラメータが入力行列に対応する配列である場合、次の行列 a b c d e f g h i である場合、渡される 2 番目のパラメータは [a,b,c,d,e,f,g,h,i である必要があります。 ]、3 番目のパラメータは除数係数です。 4 番目のパラメータはオフセットです。
function ConvolutionMatrix(input, m, pisor, offset) {

var output =document.createElement("canvas").getContext('2d').createImageData(input);
var w = input.width,
    h = input.height;
var iD = input.data,
    oD = output.data;
for(var y = 1; y < h - 1; y += 1) {
    for(var x = 1; x < w - 1; x += 1) {
        for(var c = 0; c < 3; c += 1) {
            var i = (y * w + x) * 4 + c;
            // 卷积核计算
            oD[i] = offset +(m[0] * iD[i - w * 4 - 4] + m[1] * iD[i - w * 4] + m[2] * iD[i - w * 4 + 4] +m[3] * iD[i - 4] + m[4] * iD[i] + m[5] * iD[i + 4] +m[6] * iD[i + w * 4 - 4] + m[7] * iD[i + w * 4] + m[8] * iD[i + w * 4 + 4]) /pisor;
        }
                    oD[(y * w + x) * 4 + 3] = 255; // 设置透明度为不透明
    }
}
return output;

}
//ぼかし処理
function mohu(){

var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
var m = [1,1,1,1,1,1,1,1,1];
var output = ConvolutionMatrix(imageData, m, 10,0);
ctx1.putImageData(output,0,0);

}

//コントラスト処理
function level(){

var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
var m = [0,0,0,0,3,0,0,0,0];
var output = ConvolutionMatrix(imageData, m, 1,-150);
ctx1.putImageData(output,0,0);

}

画像にも必要なデータを含めることができます

画像の各ピクセルは 4 つの RGBA 要素で構成されているため、単に画像に対して getImageData を使用して解析できるのは、知る必要のない大量のデータだけであるため、特定の色の値を独自のデータと見なすことはできますか?
例: 画像で白いピクセル (r:255,g:255:b:255,a:255) を見つけたい場合、getImageData を通じて画像のデータを取得し、各ピクセルのデータを取得できます。対応するrgbaですか? それらを抽出し、画像の幅と高さに応じて、各白いピクセルの位置情報を計算できます。

画像もより良く走査する必要があります

前のステップで、画像内の特定の要素に関連する位置情報を取得する操作はすでに理解していますが、画像がごく普通の画像の場合は、 imageData 内の各情報について、トラバースを減らすより良い方法はありますか?
答えは次のとおりです。画像のデフォルトの色は黒 (r:0,g:0,b:0,a:0) ですが、答えは必ずしも 1 つだけではありません。他にも良い方法があるかもしれませんが、原則は次のとおりです。と同じである必要があります。
各ピクセルの r を走査することにより、r!=0 の場合、このピクセルの残りの g、b、a を走査します。このステップで最も重要なことは、背景であることです。黒はすべてゼロの状態であり、計算が簡単であるため、黒を使用することをお勧めします。

もっと良い最適化はありますか?

上記の 2 つの手順に加えて、使用される画像が大きすぎるため、より多くの走査が発生します。最終的なデータが必要なものである限り、データのサイズではなくデータの抽出のみを考慮します。元の画像は数回拡大縮小でき、新しい画像を使用して取得したデータは最終的に対応する倍数で乗算され、その結果が必要なデータになります。

関連する推奨事項:

Canvasで画像を処理する方法

Canvasを使用してボールとマウスの相互作用を実現する方法

JavaScript+html5 Canvasの使用例画像にハイパーリンクを描画するコード

以上がキャンバス画像処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。