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

백엔드 없이 캔버스에 CSS 필터가 적용된 이미지 저장

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

캔버스로 변환 및 이미지 데이터 추출

1. 다음을 사용하여 이미지를 캔버스로 변환합니다. document.getElementById("myCanvas").getContext("2d").drawImage(image, 0, 0, canvas.width, canvas.height);.
2. myCanvas를 사용하여 필터가 적용된 이미지 데이터를 추출합니다. toDataURL("image/png").

CSS 필터 적용 대상 Context

단, Context Filter 속성을 지원하지 않는 경우 효과 없이 이미지가 저장됩니다. 이 문제를 해결하려면:

1. typeof ctx.filter === "undefine"을 사용하여 context.filter 속성이 있는지 확인하세요.
2. 지원되는 경우 ctx를 사용하여 CSS 필터를 적용하세요. 이미지를 캔버스에 그리기 전에 filter = "filterValue".
3. 지원되지 않는 경우 표시되지 않은 대체 방법을 사용하여 필터를 수동으로 적용하세요. here.

예제

이 예는 필터 속성을 사용하여 이미지에 세피아 필터를 적용합니다. 지원되지 않는 경우 폴백(표시되지 않음)을 사용합니다.

var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d");

  canvas.width = this.width;
  canvas.height = this.height;

  // filter
  if (typeof ctx.filter === "undefined") {
    ctx.filter = "sepia(0.8)";
    ctx.drawImage(this, 0, 0);
  } else {
    ctx.drawImage(this, 0, 0);
    // TODO: manually apply filter here.
  }

  document.querySelector("img").src = canvas.toDataURL();
}

CSS 필터는 실제 비트맵 데이터가 아닌 요소의 모양에만 적용된다는 점을 기억하세요. 실제 필터를 적용하려면 필터 속성을 사용할 수 없는 경우 픽셀 수준에서 비트맵을 사용하여 작업하세요.

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