CSS 필터가 적용된 캔버스에서 이미지를 어떻게 저장할 수 있나요?

CSS 필터를 사용하여 캔버스에서 이미지 저장

이미지에 CSS 필터를 적용했지만 저장하려고 하면 원본 이미지는 아무런 효과 없이 보존됩니다. 이 문제를 해결하려면 두 가지 주요 접근 방식이 있습니다:

1. 컨텍스트 필터 속성 활용(Firefox에만 해당)

Firefox는 CSS 필터를 캔버스 컨텍스트에 직접 적용할 수 있는 컨텍스트 필터 속성을 지원합니다.

var ctx = myCanvas.getContext('2d');
ctx.filter = "grayscale(50%) blur(5px)";
ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);

이렇게 하면 필터가 적용됩니다. 그런 다음 캔버스를 이미지로 저장합니다.

2. 수동으로 필터 적용(모든 브라우저)

컨텍스트 필터 속성은 널리 지원되지 않지만 픽셀 수준 작업을 사용하여 캔버스에 필터를 수동으로 적용할 수 있습니다. 이를 위해서는 필터 효과 모듈 레벨 1과 SVG 필터 및 색상 매트릭스 사양을 사용해야 합니다.

// Calculate filter matrix for grayscale
var greyMatrix = [
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0, 0, 0, 1, 0
];

// Apply grayscale filter to canvas
var imgData = ctx.getImageData(0, 0, myCanvas.width, myCanvas.height);
for (var i = 0; i < imgData.data.length; i += 4) {
  var r = imgData.data[i];
  var g = imgData.data[i + 1];
  var b = imgData.data[i + 2];
  imgData.data[i] = imgData.data[i + 1] = imgData.data[i + 2] = (r * greyMatrix[0] + g * greyMatrix[1] + b * greyMatrix[2]);
}
ctx.putImageData(imgData, 0, 0);

적용하려는 각 필터에 대해 이 프로세스를 반복합니다.

이 접근 방식은 Firefox 특정 속성에 의존하거나 수동 필터 조작이 필요합니다. 폭넓은 브라우저 지원이 중요하다면 백엔드 솔루션 개발을 고려해 보세요.

위 내용은 CSS 필터가 적용된 캔버스에서 이미지를 어떻게 저장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!