Javascript 이미지 처리 아이디어 및 구현 code_javascript 기술

아이디어
HTML5 캔버스는 캔버스의 데이터를 얻기 위해 getImageData 인터페이스를 제공하므로 먼저 drawImage 인터페이스를 사용하여 캔버스에 이미지를 그린 다음 getImageData를 통해 이미지 데이터 매트릭스를 얻을 수 있습니다.

IE9가 캔버스 인터페이스를 지원하기 시작했지만 getImageData로 얻은 데이터는 표준 TypedArray 메소드에 저장되지 않거나 IE9는 WebGL 기본 바이너리 데이터에 대한 지원을 제공하지 않는다는 점에 유의해야 합니다. IE9에서 지원해야 하는 경우 다음 행렬을 배열 모드로 저장해야 합니다. 오픈 소스 프로젝트 explorercanvas는 IE9 이하 버전(예: IE8)에 대한 캔버스 지원을 제공하지만 안타깝게도 G_vmlCanvasManager는 비트맵 데이터 수집 인터페이스를 제공하지 않습니다. TypedArray 관련 내용은 HTML5의 새로운 배열

기본 행렬
을 참고하세요. 이미지 처리에서는 행렬 계산이 매우 중요하므로 먼저 행렬 모델을 구축합니다.
getImageData 인터페이스를 통해 얻은 ImageData는 행렬과 같은 구조를 가지고 있지만 그 구조는 불변이고 확장에 적합하지 않기 때문에 우리는 Javascript에서 직접 행렬을 구축하기로 결정했습니다.

코드 복사 코드는 다음과 같습니다.

function Mat(__row, __col, __data, __buffer){
this.row = __row || 0;
this.channel = 4
new ArrayBuffer(__row * __col * 4);
this.data = new Uint8ClampedArray(this.buffer)
__data && this.data.set(__data)
this.bytes = 1; = "CV_RGBA ";
}


row - 행렬의 행 수를 나타냅니다.

col - 행렬의 열 수를 나타냅니다.
channel - 행의 수를 나타냅니다. RGBA 색공간은 Red(빨간색), Green(녹색), Blue(파란색), Alpha(불투명도)의 4개 채널을 갖는 것으로 설명됩니다.
buffer - 데이터가 사용하는 ArrayBuffer 참조입니다.
data - 이미지의 Uint8ClampedArray 배열 데이터입니다.
bytes - 각 데이터 단위는 uint8 데이터 유형이므로 차지하는 바이트 수는 1입니다.
type - 데이터 유형은 CV_RGBA입니다.
이미지 데이터를 행렬로 변환하는 방법

코드 복사 코드는 다음과 같습니다.

function imread (__image){

var width = __image.width,
height = __image.height;
iResize(width, height)
iCtx.drawImage(__image, 0, 0);
var imageData = iCtx.getImageData(0, 0, 너비, 높이),
tempMat = new Mat(높이, 너비, imageData.data)
imageData =
iCtx.clearRect( 0, 0 , 너비, 높이);
return tempMat;
}

참고
: 여기서 __image는 문자열 URL이 아닌 이미지 개체를 나타냅니다. 브라우저에서 Image를 읽는 것은 비동기 프로세스이고 해당 Mat 객체를 즉시 반환할 수 없기 때문에 이 함수는 다음과 같이 사용해야 합니다:

코드 복사 코드는 다음과 같습니다.

var img = new Image();

img.onload = function(){
var myMat = cv.imread(img);
};
img.src = "1.jpg";


iCtx 및 iResize 메소드는 전역 변수이므로 다른 기능과 공유할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var iCanvas = document.createElement("canvas"),

iCtx = iCanvas.getContext( "2d");
function iResize(__width, __height){
iCanvas.width = __width;
iCanvas.height = __height;

drawImage 메소드를 살펴보겠습니다
:
목적

캔버스에 이미지를 그립니다.
구문context.drawImage(img,x,y); context.drawImage(img,x,y,width,height)
context.drawImage(img,sx,sy,swidth) ,height,x,y,width,height);
예
getImageData 메소드도 있습니다:
Purpose
캔버스에서 이미지 데이터를 가져옵니다.
데이터는 RGBA 색상 공간으로 반환됩니다. 즉,
R - 빨간색 채널 크기
G - 녹색 채널 크기
B - 파란색 채널 크기
A - 불투명도 크기
구문
context.getImageData(x,y,width,height);
예




코드 복사

코드는 다음과 같습니다. 다음: red = imgData.data[0]; green = imgData.data[1] blue = imgData.data[2]; .data [3]

행렬을 이미지 데이터로 변환하는 방법
처리된 행렬은 ImageData가 되는 방법이 필요하며, 처리된 이미지를 putImageData 메서드를 통해 캔버스에 그릴 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function RGBA2ImageData(__imgMat){
var width = __imgMat.col,
height = __imgMat.row,
imageData = iCtx.createImageData(width, height);
imageData.data.set(__imgMat.data)
return imageData;
}

putImageData 메소드를 살펴보겠습니다:
목적
이미지 데이터를 통해 캔버스에 이미지를 그립니다.
구문
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
컬러 이미지를 회색조 이미지로 변환
마지막으로 간단한 색상 공간 변환을 수행합니다. RGBA에서 GRAY까지.

코드 복사 코드는 다음과 같습니다.

function cvtColor(__src){
if(__src .type && __src.type === "CV_RGBA"){
var row = __src.row,
col = __src.col
var dst = new Mat(row, col);
데이터 = dst.data,
data2 = __src.data;
var pix1, pix2, pix = __src.row * __src.col * 4
while(pix){
data [pix - = 4] = 데이터[pix1 = pix 1] = 데이터[pix2 = pix 2] = (data2[pix] * 299 data2[pix1] * 587 data2[pix2] * 114) /
data; [pix 3 ] = data2[pix 3];
}
}else{
return src;
}
return dst;
OpenCV 문서의 변환 공식
을 참고하세요:

RGBA to Gray: Y Gray to RGBA: R RGBA에서 GRAY(4개 채널을 가짐)로의 매핑 관계는 다음과 같다고 결론을 내릴 수 있습니다. RGBA에서 RGBA(GRAY) : R1 = G1 = B1