클라이언트 측 이미지에 CSS 필터를 적용하면 시각적 매력을 높일 수 있습니다. 그러나 서버 측 백엔드를 사용하지 않으면 이러한 필터링된 이미지를 직접 저장하는 것이 어려울 수 있습니다.
1. 캔버스 컨텍스트 생성:
2. 원본 이미지 그리기:
3. CSS 필터 적용:
4. 필터링된 이미지 데이터 얻기:
5. 필터링된 이미지 저장 또는 표시:
문제: 이미지가 저장되었습니다. 필터 없이.
해결책: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!