클라이언트 측 캔버스를 사용하여 CSS 필터를 적용한 이미지를 저장하는 방법은 무엇입니까?

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

소개

클라이언트 측 이미지에 CSS 필터를 적용하면 시각적 매력을 높일 수 있습니다. 그러나 서버 측 백엔드를 사용하지 않으면 이러한 필터링된 이미지를 직접 저장하는 것이 어려울 수 있습니다.

단계별 프로세스

1. 캔버스 컨텍스트 생성:

• 캔버스 요소 myCanvas와 해당 2D 렌더링 컨텍스트 ctx를 생성합니다.

2. 원본 이미지 그리기:

• ctx.drawImage()를 사용하여 원본 이미지(image1)를 캔버스에 그립니다.

3. CSS 필터 적용:

• 사용자 입력 또는 기본 설정을 기반으로 CSS 필터를 계산하고 연결합니다.
• $('#myCanvas').css를 사용하여 필터를 캔버스에 설정합니다. ('filter', filterVal)을 사용하여 결합된 CSS를 적용합니다. 필터.

4. 필터링된 이미지 데이터 얻기:

• myCanvas.toDataURL("image/png")을 사용하여 캔버스 비트맵을 필터링된 이미지를 나타내는 데이터 URL로 변환합니다.

5. 필터링된 이미지 저장 또는 표시:

• 데이터 URL을 로컬 저장소에 저장하거나 document.location.href = data를 사용하여 필터링된 이미지를 새 탭이나 창에 표시합니다.

일반적인 문제 및 해결 방법

문제: 이미지가 저장되었습니다. 필터 없이.

해결책: ctx.filter 속성이 있는지 확인하세요. 지원되는 경우 CSS 필터를 컨텍스트에 직접 적용하세요. 사용할 수 없는 경우 대체 필터를 제공하여 필터를 수동으로 적용하세요.

브라우저 호환성

ctx.filter 속성은 공식 HTML Canvas 2D 사양의 일부가 아니지만 Firefox 및 기타 지원 브라우저에서 사용할 수 있습니다. . 일부 필터는 모든 브라우저에서 지원되지 않을 수도 있습니다. 자세한 내용은 최신 브라우저 호환성 문서를 참조하세요.

예

다음 코드 조각은 프로세스를 보여줍니다.

var canvas = document.getElementById("myCanvas"),
    ctx = canvas.getContext("2d"),
    img = document.getElementById("image1");

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

var filterVal = "grayscale(0.5) blur(5px) brightness(110%)";

if (typeof ctx.filter !== "undefined") {
  ctx.filter = filterVal;
  ctx.drawImage(img, 0, 0);
} else {
  // TODO: Manually apply filters
}

var data = canvas.toDataURL("image/png");
localStorage.setItem("filteredImage", data);

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