ホームページ >ウェブフロントエンド >H5 チュートリアル >html5キャンバス画像処理の実装コード共有

html5キャンバス画像処理の実装コード共有

黄舟オリジナル: 2017-03-25 15:38:301797ブラウズ

2日前に偶然「プロHTML5プログラミング」を読んだところ、HTML5は画像処理も非常によくサポートできることがわかりましたので、ここで少し説明します。

matlab が画像を処理する方法と同様に、ここでも画像行列の形式になっています。

以下は簡単な例です

<!DOCTYPE html>   
<html>
<head>   
<title>canvas图像处理</title>  
</head>  
<body>  
<h1>canvas</h1>  
<canvas id="canvas1" width="200" height="150">是时候更换浏览器了<a href="http://firefox.com.cn/download/">点击下载firefox</a></canvas> 
<script>
    var canvas1=document.getElementById(&#39;canvas1&#39;);
    var context1=canvas1.getContext(&#39;2d&#39;);
    image=new Image();
    image.src="z.JPG";
    image.onload=function(){
	context1.drawImage(image,0,0);//绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置
    }
</script>
<br/>
<button onclick="draw()">图像的反转</button>
<br/>
<canvas id="canvas2" width="200" height="150"></canvas> 
<script>
	function draw(){
		var canvas2=document.getElementById(&#39;canvas2&#39;);
		var context2=canvas2.getContext(&#39;2d&#39;);
			var imagedata=context1.getImageData(0,0,image.width,image.height);
			var imagedata1=context2.createImageData(image.width,image.height);
			for(var j=0;j<image.height;j+=1)
			for(var i=0;i<image.width;i+=1){
			  k=4*(image.width*j+i);
			  imagedata1.data[k+0]=255-imagedata.data[k+0];
			  imagedata1.data[k+1]=255-imagedata.data[k+1];
			  imagedata1.data[k+2]=255-imagedata.data[k+2];
              imagedata1.data[k+3]=255;
			}
			context2.putImageData(imagedata1,0,0);
	}
</script> 
</body>  
</html>

1) HTML5キャンバス呼び出し

var canvas1=document.getElementById(&#39;canvas1&#39;);//获取canvas元素
var context1=canvas.getContext(&#39;2d&#39;);//此时获取到canvas图像上下文

2) 画像を作成し、元の画像を描画します

            image=new Image();//创建image对象
	    image.src="z.JPG";//image的地址
	    image.onload=function(){
		context1.drawImage(image,0,0);//绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置
        }

3) 画像のrgba行列を取得して操作します

var imagedata=context1.getImageData(0,0,image.width,image.height);
//getImageData(x1,y1,x2,y2)获取图像的rgba矩阵，其中截取图像的大小为(x1,y1)-(x2,y2) 的矩阵
var imagedata1=context2.createImageData(image.width,image.height);
//createImageData(x,y):创建宽高分别为x,y的图像矩阵
   for(var j=0;j<image.height;j+=1)
	for(var i=0;i<image.width;i+=1){
         	  k=4*(image.width*j+i);
		  imagedata1.data[k+0]=255-imagedata.data[k+0];
		  imagedata1.data[k+1]=255-imagedata.data[k+1];
		  imagedata1.data[k+2]=255-imagedata.data[k+2];
                  imagedata1.data[k+3]=255;
		}
	context2.putImageData(imagedata1,0,0);
//putImageData(image,0,0):将image矩阵的添加为context 原矩阵的一部分，起点为(0,0)
}

説明しましょう以下で詳しく説明します html5 画像の保存形式:

マトリックスの各ピクセルには、r/g/b/a 値をそれぞれ保存するための 4 つのチャネルがあります。 (4つの値が順番に連続して並んでいる、1次元の行列です)

つまり、2ピクセルごとに4ビットずつ区切って計算すると、

k=4*(image.width*j+i);为像素点（i,j）的位置，

imagedata1.data[k+0]表示R分量，依次类推，其中剩下的分别为G、B分量还有透明度。

このように、上記のプログラムは簡単な画像反転を実現しています。関数。
その効果は次のとおりです:

さらに、getImageData() 関数にはクロスドメインの問題が含まれる可能性があることに注意してください。そのため、Apache 環境を構成し、HTML をそのルートディレクトリに配置することをお勧めします。手術。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5とFlashの比較を詳しく紹介次の記事：HTML5とFlashの比較を詳しく紹介

続きを見る