캔버스의 마법 같은 사용법

캔버스에는 getImageData라는 마법의 메소드가 있습니다. 캔버스에 있는 이미지의 모든 픽셀의 색상 값을 얻을 수 있으며 변경할 수 있습니다.

다양한 필터 알고리즘이 있다면. 그런 다음 캔버스를 사용하여 사진의 필터 변환을 실현하고 Meitu Xiu Xiu와 유사한 기능을 만들 수 있습니다.

사용 방법:

1: 먼저 이미지를 캔버스로 가져옵니다.

2: var canvasData = context.getImageData(0, 0, canvas.width, 캔버스.높이); //이미지의 각 픽셀에 대한 정보를 얻고 배열을 얻으려면 이것을 사용하십시오. 얻은 정보는 [[r,g,b,a],[r,g,b,a]]와 같은 2차원 배열이 아니라 [r,g,b,a,r,g,b, a] rgba 순서로 배열된 단일 배열입니다.

3: 이 단계는 각 픽셀의 rgba 변경을 시작하는 것입니다. 다음은 그레이스케일 효과의 알고리즘 및 구현 단계에 대한 간략한 소개입니다.

function gray(canvasData) { for ( var x = 0; x < canvasData.width; x++) {   for ( var y = 0; y < canvasData.height; y++) {   // Index of the pixel in the array   var idx = (x + y * canvasData.width) * 4;   var r = canvasData.data[idx + 0];   var g = canvasData.data[idx + 1];   var b = canvasData.data[idx + 2];   var gray = .299 * r + .587 * g + .114 * b;   // assign gray scale value   canvasData.data[idx + 0] = gray; // Red channel   canvasData.data[idx + 1] = gray; // Green channel   canvasData.data[idx + 2] = gray; // Blue channel   canvasData.data[idx + 3] = 255; // Alpha channel   // add black border   if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))    {    canvasData.data[idx + 0] = 0;    canvasData.data[idx + 1] = 0;    canvasData.data[idx + 2] = 0;   }   } } return canvasData; }

4: context.putImageData(canvasData, 0, 0); //픽셀 색상 값을 처리한 후 이 문장으로 캔버스를 다시 그리는 것을 잊지 마세요

이 코드는 이미지를 흑백 효과로 변환하는 코드입니다. 얻을 수 있는 구체적인 효과는 필터 알고리즘에 따라 다릅니다. 선생님. 몇 명이세요?