캔버스의 마법 같은 사용법

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

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

지침:

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

2: var canvasData = context.getImageData(0, 0, canvas.width, canvas.height); //이미지의 각 픽셀 정보를 가져오고 배열을 가져오는 데 사용합니다. 얻은 정보는 [[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); //픽셀 색상 값을 처리한 후 이 문장으로 캔버스를 다시 그려야 합니다.

이 코드는 이미지를 변환하는 데 사용됩니다. 흑백 효과를 위한 코드입니다. 얻을 수 있는 구체적인 효과는 얼마나 많은 필터 알고리즘을 마스터했는지에 따라 달라집니다.

위 내용은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 저도 PHP 중국어 사이트에 지원하고 싶습니다!

캔버스의 마법 같은 사용법에 관한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!