ブログについて
HTML5キャンバスでは、私たちが直接ピクセルを操作することができ、我々は、オブジェクト配列内のデータを読み書きするピクセルデータのImageDataオブジェクトを操作することができます。ここにも（アンチエイリアシング）を平滑化し、どのようにキャンバスキャンバスから画像を保存するには画像を制御する方法について説明します。
- 画像データオブジェクト
- オブジェクトimageDateを読み込みまたは書き込み
- スケーリングとアンチエイリアシング
- 名前を付けて保存画像を保存
ImageDataをオブジェクト
ImageDataをオブジェクトは、次の読み取り専用プロパティを含む、実際の画素データにキャンバスオブジェクトを格納されました
- IWIDTH：PXの幅の絵
- 高さ：ピクセルでのイメージの高さ
- データ：Uint8ClampedArray型一次元アレイ、0と255との間のRGBAフォーマット、整数データ、範囲（255を含む）を含みます。
- 元の画素データを表示するために使用することができるプロパティは、ピクセルデータ配列Uint8ClampedArrayを返します。示される;（これは「RGBA」フォーマットである、赤、緑、青および透明な順序値に応じて）各画素値は4 1bytes。色の値の各部分は、0〜255で表されます。各部分は、アレイ内の連続したインデックスに割り当てられ、配列インデックス0の左上の画素位置の赤色部分。配列全体を通して、次に下、左から右に画素が処理されます。
- R / G / B / Aの値の第i行j列を取得します。
imageData.data[((行数-1)*imageData.width + (列数-1))*4 - 1 + 1/2/3/4];
- 画素アレイUint8ClampedArrayのサイズを取得します：
var numBytes = imageData.data.length;
ImageDataオブジェクトの作成
一般的に、のImageDataオブジェクトを作成するために、我々はcreateImageDataメソッドを使用することができます。
- VAR myImageData = ctx.createImageData（幅、高さ）：幅の新しい次元を作成し、ImageDataをオブジェクトの高さは、全てのピクセルが透明な黒にプリセットされています。
- VAR myImageData = ctx.createImageData（anotherImageDataは）：anotherImageDataオブジェクトを指定された同じ画素のImageDataをオブジェクトを作成します。新しいオブジェクトは、全ての画素の透明黒にプリセットされています。これは、画像データをコピーすることはありません。
var myImageData = ctx.createImageData(width, height);
var myImageData = ctx.createImageData(anotherImageData);
シーンキャンバス領域でのImageDataオブジェクトを取得します。
我々はgetImageData法によるキャンバスの指定された領域に画素データを取得することができます。
- getImageData（X、Y、幅、高さ）：戻り、画素領域の（X、Y、X +幅、Y +高さ）について説明ImageDataをオブジェクト
例：スポイト
この例では、我々は、マウスの位置のピクセルに戻ります。
- マウスの位置x、yのを取得
- オブジェクトの位置を取得しますImageDataを
- オブジェクトデータを取得します
- データを返すと、塗装色のRGBA値を持ちます
var img=new Image();
window.onload=function()
{
img.src="spiderMan.jpg";//获取图片
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
img.onload=function()
{
ctx.drawImage(img,0,0,400,300);//画出图片
//获取ImageData对象
canvas.addEventListener("mousemove",function(e)
{
var x=e.layerX;
var y=e.layerY;//获取坐标
var imageData=ctx.getImageData(x,y,1,1);//获取x，y处像素1*1的图片
var data=imageData.data;//获取像素数据
var r=data[0];
var g=data[1];
var b=data[2];
var a=data[3];
var color="rgba("+r+","+g+","+b+","+a+")";
ctx.clearRect(0,305,400,400)
ctx.save();
ctx.fillStyle=color;
ctx.fillRect(0,305,100,40);//绘制矩形
ctx.font="15px 幼圆";
ctx.save();
ctx.fillStyle=" #7B68EE";
ctx.fillRect(0,375,250,40);
ctx.restore();
ctx.fillText("光标处像素="+color,0,400);
ctx.restore();
})
}
}
画素データはキャンバスのシーンで書かれています
我々はキャンバスgetImageData法により指定された領域の画素データを取得するだけでなく、putImageDataを使用することができる（）メソッドは、ピクセル書き込みにキャンバスを書き込みます。
- putImageData（画像データ、X、Y）：のImageDataオブジェクトを描画された画像は、Y位置、Xを表し
- ImageData.dataは直接オブジェクトはImageDataを変更することができます修正します
たとえばputImageData用
我々は、画像のピクセルを操作する次の後、画素値が除去され、そのためにグレースケールと反転操作、我々は、グレースケール及び反転を達成するために2つの機能を設定します。
- グレースケール階調処理：X = 0.299R + 0.587グラム+ 0.114B
function grayscale()//灰度
{
for(var i=0;i<data.length;i+=4)
{
avg=0.299*data[i] + 0.587*data[i+1] + 0.114*data[i+2];
data[i]=data[i+1]=data[i+2]=avg;
}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.putImageData(imageData,0,0);
}
- 反転プロセスを反転します。x = 255-I
function intervar()//反相
{
for(var i=0;i<data.length;i+=4)
{
data[i]=255-data[i];//r
data[i+1]=255-data[i+1];//g
data[i+2]=255-data[i+2];//b
}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.putImageData(imageData,0,0);
}
最後に、リスナーを追加
var invertbtn = document.getElementById('invertbtn');
invertbtn.addEventListener('click', intervar);
var grayscalebtn = document.getElementById('grayscalebtn');
grayscalebtn.addEventListener('click', grayscale);
スケーリングとアンチエイリアシング
画像上のキャンバスのズーム操作は、我々がすでに導入している、我々は取り除くアンチエイリアスを取得したい場合は、参照して、（X、Y、W、H）、デフォルトのズームアンチエイリアスプロセスのdrawImageによって達成されます特定のピクセルは、imageSmoothingEnabled特性を使用することができます。
- 鋸歯状imageSmoothingEnabled：trueの場合、アンチエイリアシングを示し、偽のインプレッションノコギリであります
例えば、スケーリングおよびアンチエイリアシングのために
var img=new Image();
img.src="../纸飞机.jpg";
var canvas;
var able=1;
img.onload=function()
{
draw(this);
}
function toggleSmoothing()
{
able=able?false:true;
ctx.imageSmoothingEnabled=able;
}
function show(e)
{
var x=e.layerX;
var y=e.layerY;//获取坐标
ctx.clearRect(500,0,200,200);
ctx.drawImage(canvas,Math.abs(x-5),Math.abs(y-5),10,10,500,0,200,200);
}
function draw(img) {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0,480,300);
img.style.display = 'none';
var smoothbtn = document.getElementById('smoothbtn');//获取区域
smoothbtn.addEventListener('click',toggleSmoothing);
canvas.addEventListener('mousemove',show);
}
名前を付けて保存画像を保存
画像を保存するときに非常に便利ですHTMLCanvasElement A toDataURL（）メソッド、。これは、画像形式を指定されたパラメータデータリンクタイプは、パフォーマンスが含まれて返されます。画像解像度は96DPIで返します。
- canvas.toDataURL（ '画像/ PNG'） ：デフォルト設定。PNGイメージを作成します。
- （品質の'画像/ JPEG'、）canvas.toDataURL：JPG画像を作成します。オプションで、1が最高の品質、0、実質的差別ではないが、比較的小さなファイルサイズであると0-1からの品質の商品を提供することができます。
あなたがキャンバスからのデータリンクを生成する場合、例えば、あなたが任意の<イメージ>要素のためにそれを使用することができ、またはのためにローカルに保存されたダウンロードのハイパーリンクプロパティにそれを置きます - canvas.toBlob（タイプのコールバック、encoderOptions） ：これは、のようなキャンバス上のブロブの代表画像を作成します。
ハイパーリンクで画像を保存します。
私たちは、少し上の画像を変更して、ハイパーリンクを挿入します
var img=new Image();
img.src="../纸飞机.jpg";
var canvas;
var able=1;
img.onload=function()
{
draw(this);
}
function toggleSmoothing()
{
able=able?false:true;
ctx.imageSmoothingEnabled=able;
}
function show(e)
{
var x=e.layerX;
var y=e.layerY;//获取坐标
ctx.clearRect(500,0,200,200);
ctx.drawImage(canvas,Math.abs(x-5),Math.abs(y-5),10,10,500,0,200,200);
}
function draw(img) {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0,480,300);
img.style.display = 'none';
var smoothbtn = document.getElementById('smoothbtn');//获取区域
smoothbtn.addEventListener('click',toggleSmoothing);
canvas.addEventListener('mousemove',show);
canvas.addEventListener("click",function(){
var area=document.getElementsByTagName("a")[0];
area.setAttribute("href",canvas.toDataURL("纸飞机",1));
})
}
画像をクリックすると、その写真をダウンロードするハイパーリンクをクリックし、toDataURLオブジェクトを生成します。
写真のダウンロードが完了します
