Partage de code d'implémentation du traitement d'image de canevas HTML5-Tutoriel H5-php.cn

Partage de code d'implémentation du traitement d'image de canevas HTML5

黄舟

Libérer： 2017-03-25 15:38:30

original

1771 Les gens l'ont consulté

J'ai accidentellement lu "programmation pro html5" il y a deux jours et j'ai découvert que html5 peut également très bien prendre en charge le traitement d'image Laissez-moi vous expliquer un peu ici.

Semblable au traitement des images Matlab, la forme de matrice d'image est également utilisée ici.

Ce qui suit est un exemple simple :

<!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>

Copier après la connexion

1) Appel de canevas HTML5

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

Copier après la connexion

2) Créez une image et dessinez l'image originale

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

Copier après la connexion

　3) Récupérez la matrice rgba de l'image et exploitez

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)
}

Copier après la connexion

Expliquons en détail le formulaire de stockage des images html5 :

matrice Chaque pixel dispose de quatre canaux pour stocker respectivement les valeurs r/g/b/a. (Les quatre valeurs sont disposées consécutivement dans l'ordre, ce qui est une matrice unidimensionnelle)

Par conséquent, chaque deux pixels sont séparés par 4 bits lors du calcul,

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

Copier après la connexion

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

Copier après la connexion

<.>De cette façon, le programme ci-dessus implémente une simple fonction d'inversion d'image.

L'effet est le suivant :

De plus, il convient de noter que la fonction getImageData() peut impliquer des problèmes inter-domaines, il est donc recommandé de configurer l'environnement Apache et placez le code HTML Go dans son répertoire racine pour fonctionner.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!