HTML5 캔버스 이미지 처리 구현 코드 공유

黄舟
풀어 주다: 2017-03-25 15:38:30
원래의
1771명이 탐색했습니다.

이틀 전에 우연히 "pro 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 이미지의 저장 형식을 자세히 설명하겠습니다.

각 픽셀에는 4개의 픽셀이 있습니다. 매트릭스에서 채널은 각각 r/g/b/a 값을 저장합니다. (4개의 값이 순서대로 연속적으로 배열되어 있는 1차원 행렬입니다.)

따라서 두 픽셀이 각각 4비트씩 분리되어 계산되면

k=4*(image.width*j+i);为像素点(i,j)的位置,
로그인 후 복사
imagedata1.data[k+0]表示R分量,依次类推,其中剩下的分别为G、B分量还有透明度。
로그인 후 복사

가 됩니다. , 위의 프로그램은 반전 기능을 통해 간단한 이미지를 구현합니다.
효과는 다음과 같습니다.

또한 getImageData() 함수에는 도메인 간 문제가 포함될 수 있으므로 구성하는 것이 좋습니다. apache 환경을 설치하고 html Go를 해당 루트 디렉터리에 배치하여 작업합니다.

위 내용은 HTML5 캔버스 이미지 처리 구현 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!