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:301729parcourir
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('canvas1');
var context1=canvas1.getContext('2d');
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('canvas2');
var context2=canvas2.getContext('2d');
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('canvas1');//获取canvas元素 var context1=canvas.getContext('2d');//此时获取到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 :
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!