Maison > Article > interface Web > Partage de code d'implémentation du traitement d'image de canevas HTML5

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

黄舟original: 2017-03-25 15:38:301795parcourir

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>

1) Appel de canevas HTML5

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

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画布的位置
        }

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

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）的位置，

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

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une introduction détaillée à la comparaison entre HTML5 et FlashArticle suivant：Une introduction détaillée à la comparaison entre HTML5 et Flash

Articles Liés

Voir plus