Javascript 이미지 처리 - Virtual Edge 소개 및 사용법_javascript 기술

머리말
이전 기사에서는 행렬에 몇 가지 일반적인 방법을 추가했습니다. 이 기사에서는 이미지의 가상 가장자리에 대해 설명합니다.

가상 가장자리
가상 가장자리는 특정 매핑 관계에 따라 이미지에 가장자리를 추가하는 것입니다.
그럼 가상 가장자리의 용도는 무엇인가요? 예를 들어, 반사 효과를 쉽게 만들 수 있습니다.

물론 이것은 단지 부작용일 뿐입니다. 가상 가장자리는 이미지 컨볼루션 작업(예: 스무딩 작업)의 특성상 주로 사용됩니다. 컨벌루션 작업에서는 이미지를 확대해야만 모서리를 컨볼루션할 수 있습니다. 이때 이미지를 전처리하고 가상 가장자리를 추가해야 합니다.
직접 말하면 이미지 처리 전 전처리를 한다는 뜻입니다.

Edge 유형
OpenCV 관련 문서의 Edge 설명은 다음과 같습니다.

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

/*
다양한 테두리 유형, 이미지 경계는 '|'로 표시됩니다.
* BORDER_REPLICATE: aaaaaa|abcdefgh|hhhhhhh
* BORDER_REFLECT: fedcba| abcdefgh|hgfedcb
* BORDER_REFLECT_101: gfedcb|abcdefgh|gfedcba
* BORDER_WRAP: cdefgh|abcdefgh|abcdefg
* BORDER_CONSTANT: iiiiii|abcdefgh|iiiiiii 일부 지정된 'i'
* /

예를 들어 BODER_REFLECT는 특정 픽셀 행 또는 열에 대한 것입니다.
abcdefgh
왼쪽 가상 가장자리는 fedcba에 해당하고 오른쪽은 반사 매핑인 hgfedcb에 해당합니다. . 위 그림은 그림 하단에 BORDER_REFLECT 유형의 가상 가장자리를 추가하여 얻은 것입니다.
그리고 BORDER_CONSTANT는 모든 가장자리가 고정된 값 i를 갖는다는 것을 의미합니다.
구현
BORDER_CONSTANT는 특수하므로 다른 유형과 별도로 처리됩니다.

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

function copyMakeBorder(__src, __top, __left, __bottom, __right , __borderType, __value){
if(__src.type != "CV_RGBA"){
console.error("지원되지 않는 유형!");
}
if(__borderType = == CV_BORDER_CONSTANT ){
return copyMakeConstBorder_8U(__src, __top, __left, __bottom, __right, __value);
}else{
return copyMakeBorder_8U(__src, __top, __left, __bottom, __right, __borderType); 🎜>}
};

이 함수는 입력 행렬 src, 각 방향에 추가할 픽셀 크기 위쪽, 왼쪽, 아래쪽, 오른쪽, 가장자리 유형 borderType 및 배열을 허용합니다. 즉, 상수 에지인 경우 상수 값이 추가됩니다.
그런 다음 에지 매핑 관계 함수 borderInterpolate를 소개합니다.

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

function borderInterpolate(__p, __len, __borderType) {
if(__p < 0 || __p >= __len){
switch(__borderType){
case CV_BORDER_REPLICATE:
__p = __p < 0 ? 🎜>break ;
case CV_BORDER_REFLECT:
case CV_BORDER_REFLECT_101:
var delta = __borderType == CV_BORDER_REFLECT_101;
if(__len == 1)
return 0; >if( __p __p = -__p - 1 델타;
else
__p = __len - 1 - (__p - __len) -
}while(__p < 0 || __p >= __len)
break;
case CV_BORDER_WRAP:
if(__p < 0)
__p -= ((__p - __len 1) / __len)
if( __p >= __len)
__p %= __len;
break;
case CV_BORDER_CONSTANT:
__p = -1
error(arguments.callee, UNSPPORT_BORDER_TYPE/* {line} */);
}
}
return __p;
}


이 함수의 의미는 특정 라인 또는 원래 길이가 len인 선. 가상 픽셀 p의 열(p는 일반적으로 음수이거나 행의 원래 길이보다 크거나 같은 숫자입니다. 음수는 선의 왼쪽에 있는 픽셀을 나타냅니다. 원래 길이보다 크거나 같은 숫자는 오른쪽의 픽셀을 나타냅니다)가 이 행에 매핑됩니다. CV_BORDER_REPLICATE를 분석해 보겠습니다.
　__p = __p < 0 ? 0 : __len - 1
즉, p가 음수인 경우(즉, 왼쪽) 매핑됩니다. 0으로, 그렇지 않으면 len - 1로 매핑됩니다.
그런 다음 copyMakeBorder_8U 함수를 구현합니다.

코드 복사

코드는 다음과 같습니다.

function copyMakeBorder_8U(__src, __top, __left, __bottom, __right, __borderType){
var i, j;
var 너비 = __src.col,
높이 = __src.row;
var top = __top,
left = __left || __상단,
오른쪽 = __오른쪽 || 왼쪽,
하단 = __bottom || 상단,
dstWidth = 너비 왼쪽 오른쪽,
dstHeight = 높이 상단 하단,
borderType = borderType || CV_BORDER_REFLECT;
var buffer = new ArrayBuffer(dstHeight * dstWidth * 4),
tab = new Uint32Array(왼쪽 오른쪽);
for(i = 0; i tab[i] = borderInterpolate(i - 왼쪽, 너비, __borderType);
}
for(i = 0; i < right; i ){
tab[i left] = borderInterpolate(width i, width, __borderType);
}
var tempArray, 데이터;
for(i = 0; i tempArray = new Uint32Array(buffer, (i top) * dstWidth * 4, dstWidth);
data = new Uint32Array(__src.buffer, i * 너비 * 4, 너비);
for(j = 0; j tempArray[j] = data[tab[j]];
for(j = 0; j tempArray[j 너비 왼쪽] = data[tab[j 왼쪽]];
tempArray.set(데이터, 왼쪽);
}
var allArray = new Uint32Array(버퍼);
for(i = 0; i j = borderInterpolate(i - top, height, __borderType);
tempArray = new Uint32Array(buffer, i * dstWidth * 4, dstWidth);
tempArray.set(allArray.subarray((j top) * dstWidth, (j top 1) * dstWidth));
}
for(i = 0; i < Bottom; i ){
j = borderInterpolate(i height, height, __borderType);
tempArray = new Uint32Array(buffer, (i 상단 높이) * dstWidth * 4, dstWidth);
tempArray.set(allArray.subarray((j top) * dstWidth, (j top 1) * dstWidth));
}
return new Mat(dstHeight, dstWidth, new Uint8ClampedArray(buffer));
}

这里需要解释下, 边缘的复顺序是：先对每行的左右进行扩話，然后在此基础上进行上下扩試，如图所示。

저희는 ArrayBuffer의 특성을 이용하여 ArrayBuffer의 성능을 향상시켰습니다.点了。什么의미思？
比如对于某个image素点: RGBA, 由于某个通道是用无符号8为整数来存储的, 所以实际一个 Image 素点则对应了32位的存储大小, 由于ArrayBuffer 性质,可以将数据转成任意类型来处理，这样우리는 Uint32Array类型,将数据变成每个image素点的数据数组。
那么copyConstBorder_8U就比较容易实现了:

复제대码 代码如下:

function copyMakeConstBorder_8U(__src, __top, __left, __bottom, __right, __value){
var i, j;
var 너비 = __src.col,
높이 = __src.row;
var top = __top,
left = __left || __상단,
오른쪽 = __오른쪽 || 왼쪽,
하단 = __bottom || 상단,
dstWidth = 너비 왼쪽 오른쪽,
dstHeight = 높이 상단 하단,
value = __value || [0, 0, 0, 255];
var constBuf = new ArrayBuffer(dstWidth * 4),
constArray = new Uint8ClampedArray(constBuf);
버퍼 = new ArrayBuffer(dstHeight * dstWidth * 4);
for(i = 0; i for( j = 0; j constArray[i * 4 j] = value[j];
}
}
constArray = new Uint32Array(constBuf);
var tempArray;
for(i = 0; i tempArray = new Uint32Array(buffer, (i top) * dstWidth * 4, left);
tempArray.set(constArray.subarray(0, 왼쪽));
tempArray = new Uint32Array(buffer, ((i top 1) * dstWidth - right) * 4, right);
tempArray.set(constArray.subarray(0, 오른쪽));
tempArray = new Uint32Array(buffer, ((i top) * dstWidth left) * 4, width);
tempArray.set(new Uint32Array(__src.buffer, i * width * 4, width));
}
for(i = 0; i < top; i ){
tempArray = new Uint32Array(buffer, i * dstWidth * 4, dstWidth);
tempArray.set(constArray);
}
for(i = 0; i < Bottom; i ){
tempArray = new Uint32Array(buffer, (i 상단 높이) * dstWidth * 4, dstWidth);
tempArray.set(constArray);
}
return new Mat(dstHeight, dstWidth, new Uint8ClampedArray(buffer));
}

效果图
CV_BORDER_REPLICATE

CV_BORDER_REFLECT

CV_BORDER_WRAP

CV_BORDER_CONSTANT