캔버스에서 CSS 필터를 적용하여 이미지를 저장하는 방법은 무엇입니까?

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

챌린지

클라이언트측에서 CSS 필터를 적용한 후 이미지를 저장하려면 다음 단계를 따르세요.

1. CSS 필터를 사용하여 image.
2. 이미지를 캔버스 요소로 변환합니다.
3. var data = myCanvas.toDataURL("image/png");를 사용하여 이미지를 저장해 보세요.

그러나 이 방법을 사용하면 필터를 적용하지 않고 이미지를 저장하는 경우가 많습니다.

문제

CSS 필터는 요소 자체에 적용되지만 캔버스 요소는 CSS의 영향을 받지 않는 비트맵을 나타냅니다. 컨텍스트의 필터 속성이 없으면 유일한 옵션은 이미지 픽셀에 필터를 수동으로 적용하는 것입니다.

해결책

컨텍스트의 필터 속성을 사용할 수 있는 경우(대부분의 최신 브라우저에서 지원됨) 다음을 수행할 수 있습니다. 필터 직접 적용:

var ctx = myCanvas.getContext('2d');

var filterVal = "grayscale("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate(" + saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;
ctx.filter = filterVal;

필터 속성을 사용할 수 없는 경우 픽셀 수준에서 필터 효과를 수동으로 구현해야 합니다. 지침은 필터 효과 모듈 레벨 1 및 SVG 필터 및 색상 매트릭스를 참조하세요.

코드 예

이 예는 컨텍스트의 필터 속성을 사용하여 필터를 적용하는 방법을 보여줍니다.

// Create an image object
var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "path/to/image.jpg";

function draw() {
  // Get the canvas and its context
  var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d");

  // Resize the canvas to match the image
  canvas.width = this.width;
  canvas.height = this.height;

  // Apply the filter using the `filter` property
  ctx.filter = "sepia(0.8)";

  // Draw the image onto the canvas
  ctx.drawImage(this, 0, 0);

  // Convert the canvas to a data URL
  var data = canvas.toDataURL("image/png");

  // Set the `src` attribute of an image element to the data URL
  document.querySelector("img").src = data;
}

위 내용은 캔버스에서 CSS 필터를 적용하여 이미지를 저장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!