canvasピクセル操作のピクチャフィルタ(5)

フィルタの後の図:
実現原理:
画像のピクセル情報を取得できるcanvasの方法:getImageData**CanvasRenderingContext2D** .getImageData()は1つを返しますImageDataコンストラクション関数canvasとともに作成または使用されるCanvasRenderingContext 2 Dオブジェクトの作成方法:createImageData()およびgetImageData().putImageData()を使用してcanvasの一部を設定することもできます.")オブジェクト、canvas領域に隠された画素データを記述するために使用され、この領域は矩形で表され、開始点は
(sx,sy)、幅は
sw、高為
sh.
私たちは中の戻り対象のdata属性を使う必要があります.dataの中には大きな配列があり、各画素の情報が含まれています.そのうち、1画素は4ビットビットで表され、つまり4ビットで1画素を構成し、それぞれrgba、r:0~255、g:0~255、b:0~255、a:0~255、alphaチャネルは一般的に0~1ですが、彼もここでは0~255で表すのが便利です.例えば、原図の第1画素rgbaは0,17,43,0であり、対応するのはdata[0]=0、data[1]=17、data[2]=43、data[4]=255であり、第2画素は同様である.
では、これらの画素の値を得てフィルタ操作を実現するには、これらの画素の値を変更することにほかならない.例えば、画像を黄色くするには、rgbaのbの値は必要ない.ユーザーの安全を考慮するため、getImageDataはローカルの画像を読み取ることができず、サービス側のファイルしか読み取ることができません.サービス側はwamp(htmlファイルと画像ファイルをインストールしたwampファイルのwwwディレクトリの下に置いて、ローカル遊覧器のアドレスバーにlocalhost/あなたのディレクトリ/ファイル名.htmlを入力)でアクセスできます.

画像オブジェクトを新規作成するには:

let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let img=new Image();
img.src='images/1.jpg';

画像のロードが完了したら、図面を描き始めます.

img.onload=function(){
    gd.drawImage(img,-500,0);
}

imageDataオブジェクトの取得:

    let imgArr=gd.getImageData(0,0,c1.width,c1.height);

rgbaのbをすべて50に変更します.

for(let r=0;r

imgArr.data[4*(r*c1.width+c)+2]=50;
この言葉の意味は、各画素のb(blue)の値を50に変え、1画素に4ビットあるべきで、各行*キャンバスの幅+何列+2が各画素のbの値である.
更新が完了したら、次のように設定する必要があります.

gd.putImageData(imgArr,0,0);

完全なコード:

    
    
    
    
    
    
        window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            let img=new Image();
            img.src='images/1.jpg';
            img.onload=function(){
                gd.drawImage(img,-500,0);
                let imgArr=gd.getImageData(0,0,c1.width,c1.height);

                for(let r=0;r<c1.height;r++){
                    for(let c=0;c<c1.width;c++){
                        imgArr.data[4*(r*c1.width+c)+2]=50;
                    }
                }
                gd.putImageData(imgArr,0,0);
            }
        }