HTML 5 Canvas操作画像画素
画像ピクセルの操作
画像をさらに処理する場合は、getImageData()メソッドで画像画素を取得し、処理後にputImageData()メソッドで処理後の画素をキャンバスに再描画することができます.
1)getImageData()メソッド
この方法は、キャンバス上の指定された領域の画像画素データを取得するために使用される.呼び出しフォーマットは次のとおりです.
ここで、sx、syは選択領域の座標であり、sWidth、sHeightは選択領域の幅と高さである.このメソッドは、選択した領域の元のピクセル情報であるImageDataオブジェクトへの参照を返します.このオブジェクトには、次の3つの属性が含まれます.
width:選択した領域の各行に何画素があるか.
height:選択した領域の各列に何画素がありますか.
Data:ピクセル値の1次元配列で、選択した領域の各ピクセルのRGBA(赤、緑、青、alpha)値を保存し、その領域を左から右、上から下へRGBA形式で[r 1,g 1,b 1,a 1,r 2,g 2,b 2,a 2...] .したがって、選択された領域の各画素は、この配列で4つの整数値になります.
説明:
widthとheightが与えられたcanvasにおいて、座標(x,y)における画素に対応するRGBAの計算式は以下の通りである.
R:((width * y) + x) * 4
G:((width * y) + x) * 4 + 1
B:((width * y) + x) * 4 + 2
A:((width * y) + x) * 4 + 3
2)putImageData()メソッド
任意の画素のRGBAの値を変更した後、処理後の画像画素をputImageData()メソッドでキャンバスに再描画できます.呼び出しフォーマット:
ここで、imgdataは画素データ、dx、dyは描画対象の位置座標、sx、syはimgdataの位置座標、sWidth、sHeightはimgdataの幅と高さ値(imgdataのsxとsy座標に対するオフセット量)である.オプションパラメータsx、sy、sw、shを省略すると、imgdata全体が描画されることを示します.
putImageData()メソッドでは、グラフィックのすべてのプロパティが無視され、組み合わせ操作もgloabAlphaにピクセルを乗じて表示されず、シャドウも描画されません.
説明:
putImageData()メソッドを使用してcanvasに画像データを描画する場合、globalAlphaやglobalCompositeOperationのようなグローバルプロパティは、描画された画像に影響を与えず、ブラウザも描画時にシャドウ、グローバル透明度、組合せなどの効果を適用しません.これはdrawImage()メソッドとの違いです.
作者について
首をかしげる先生、15年以上のソフトウェアの開発の経験、Webの開発が好きで、HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrapなどに精通して、『HTML宝典』、『揭秘CSS』、『Less簡明教程』、『JSON教程』、『Bootstrap 2ユーザーガイド』を著して、そしてすべてGitHubの上で源を開きます.
本文は首を捻ったネットの《HTML宝典》から出て、オンラインで読むことを歓迎して、そして貴重な意見を提出します.
画像をさらに処理する場合は、getImageData()メソッドで画像画素を取得し、処理後にputImageData()メソッドで処理後の画素をキャンバスに再描画することができます.
1)getImageData()メソッド
この方法は、キャンバス上の指定された領域の画像画素データを取得するために使用される.呼び出しフォーマットは次のとおりです.
var data = context.getImageData(sx, sy, sWidth, sHeight) ここで、sx、syは選択領域の座標であり、sWidth、sHeightは選択領域の幅と高さである.このメソッドは、選択した領域の元のピクセル情報であるImageDataオブジェクトへの参照を返します.このオブジェクトには、次の3つの属性が含まれます.
width:選択した領域の各行に何画素があるか.
height:選択した領域の各列に何画素がありますか.
Data:ピクセル値の1次元配列で、選択した領域の各ピクセルのRGBA(赤、緑、青、alpha)値を保存し、その領域を左から右、上から下へRGBA形式で[r 1,g 1,b 1,a 1,r 2,g 2,b 2,a 2...] .したがって、選択された領域の各画素は、この配列で4つの整数値になります.
説明:
widthとheightが与えられたcanvasにおいて、座標(x,y)における画素に対応するRGBAの計算式は以下の通りである.
R:((width * y) + x) * 4
G:((width * y) + x) * 4 + 1
B:((width * y) + x) * 4 + 2
A:((width * y) + x) * 4 + 3
2)putImageData()メソッド
任意の画素のRGBAの値を変更した後、処理後の画像画素をputImageData()メソッドでキャンバスに再描画できます.呼び出しフォーマット:
context.putImageData(imgdata, dx, dy [, sx, sy, sWidth, sHeight]) ここで、imgdataは画素データ、dx、dyは描画対象の位置座標、sx、syはimgdataの位置座標、sWidth、sHeightはimgdataの幅と高さ値(imgdataのsxとsy座標に対するオフセット量)である.オプションパラメータsx、sy、sw、shを省略すると、imgdata全体が描画されることを示します.
putImageData()メソッドでは、グラフィックのすべてのプロパティが無視され、組み合わせ操作もgloabAlphaにピクセルを乗じて表示されず、シャドウも描画されません.
説明:
putImageData()メソッドを使用してcanvasに画像データを描画する場合、globalAlphaやglobalCompositeOperationのようなグローバルプロパティは、描画された画像に影響を与えず、ブラウザも描画時にシャドウ、グローバル透明度、組合せなどの効果を適用しません.これはdrawImage()メソッドとの違いです.
作者について
首をかしげる先生、15年以上のソフトウェアの開発の経験、Webの開発が好きで、HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrapなどに精通して、『HTML宝典』、『揭秘CSS』、『Less簡明教程』、『JSON教程』、『Bootstrap 2ユーザーガイド』を著して、そしてすべてGitHubの上で源を開きます.
本文は首を捻ったネットの《HTML宝典》から出て、オンラインで読むことを歓迎して、そして貴重な意見を提出します.