백엔드 없이 클라이언트 측 CSS 필터가 적용된 이미지를 어떻게 저장할 수 있습니까?

클라이언트 측에 CSS 필터가 적용된 이미지 저장

문제:

방법 백엔드 없이 클라이언트측에서 CSS 필터를 사용한 후 이미지를 저장할 수 있습니까?

배경:

많은 개발자가 CSS 필터가 적용된 이미지를 저장할 때 문제에 직면합니다. 클라이언트 측에서. 필터를 적용하고, 캔버스로 변환하고, toDataURL로 저장하는 일반적인 워크플로를 따랐음에도 불구하고 결과에 의도한 효과가 부족한 경우가 많습니다.

해결책:

해결의 핵심 이 문제는 CSS 필터를 비트맵에 직접 적용할 수 있는 컨텍스트 개체의 필터 속성을 사용하는 데 있습니다. 이 속성은 아직 웹 표준의 공식적인 부분은 아니지만 최근 들어 더 폭넓은 지지를 얻고 있습니다.

구현:

다음은 필터 속성을 통합한 간결한 구현입니다. :

// Check if the filter property exists
if (typeof ctx.filter !== "undefined") {
  // Apply the desired CSS filter
  ctx.filter = "sepia(0.8)";
  // Draw the image onto the canvas with the applied filter
  ctx.drawImage(this, 0, 0);
} else {
  // Fallback approach (not shown) for browsers without the filter property
}

추가 컨텍스트:

• CSS와 DOM은 캔버스 비트맵과 별도로 작동합니다. CSS 필터는 비트맵 자체가 아닌 요소(비트맵 보기 포털)에 영향을 미칩니다.
• 필터 속성이 없는 경우 이미지에 필터를 수동으로 적용하려면 픽셀 수준 조작이 필요합니다.

• 필터 계산을 위한 리소스:

  • 필터 효과 모듈 레벨 1
  • SVG 필터 및 색상 매트릭스

예:

이 예는 캔버스의 이미지에 세피아 필터를 적용하고 결과를 이미지로 추출합니다.

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    img = new Image();

img.crossOrigin = "";
img.onload = draw;
img.src = "//i.imgur.com/WblO1jx.jpg";

function draw() {
  canvas.width = this.width;
  canvas.height = this.height;

  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 필터가 적용된 이미지를 어떻게 저장할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!