CSS 필터를 적용하여 이미지를 저장하는 방법

CSS 필터를 이미지에 적용한 다음 이미지를 디스크에 저장하는 방법에 대해 궁금합니다.CSS 필터를 적용하여 이미지를 저장하는 방법

예를 들어, 나는 이미지 태그, 나는 CSS

img.sepia{ 
    filter: sepia(20%); 
}

를 통해 세피아 효과를 적용하고

<img src="img.png" class="sepia" />

가 어떻게 저장할 수있는 HTML에 이미지 태그에 클래스를 적용 할 수 있습니다 필터가 적용된 이미지?

출처

2016-10-04 Rahul

[화면 잡기] (https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots) – adeneo

언제든지 화면에서 스크린 샷을 찍을 수 있습니다. 자신의 용도를 찾고 있습니다. – poush

아니, 기본적으로 내 웹 사이트에 사용하고 싶습니다. 그래서 내가 CSS에 의해 필터를 적용 할 수 있도록 웹 사이트에 사진을 업로드 한 다음 내 갤러리에 저장하십시오. – Rahul

캔버스 요소에 이미지를 쓰고 자바 스크립트에서 원하는 필터를 설정 한 다음 다운로드 할 수 있습니다. 그것은 대부분의 모바일 브라우저에서 지원되지 않는 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

: 그래서 캔버스 방법을 선택하기 전에 브라우저 호환성 확인이

var canvas = document.getElementById('image'); 
 
var ctx = canvas.getContext('2d'); 
 
ctx.filter = "sepia(20%)"; 
 
var img = document.getElementById("dataimage"); 
 
ctx.drawImage(img,0,0, canvas.width, canvas.height); 
 

 
var downloadFile = document.getElementById('download'); 
 
downloadFile.addEventListener('click', download, false); 
 

 

 
function download() { 
 
    var dt = canvas.toDataURL('image/jpeg'); 
 
    this.href = dt; 
 
};

img{ 
 
    width:400px; 
 
    height:400px; 
 
}

<img src="" id="dataimage" /> 
 
<canvas id="image" width="400px" height="400px"></canvas> 
 
<a id="download">Download image</a>

출처

2016-10-04 18:32:21

좋습니다. 아이디어를 가져 주셔서 감사합니다. 나는 지금 캔버스를 배울 것이다. 이 문제를 해결합니다. 하지만 그 다운로드 버튼은 나를 위해 일하지 않았다 .. :) – Rahul

같은 것입니다.

나는 Cloudinary와 같은 이미지 서비스를 사용합니다.

출처

2017-06-15 18:35:57 slotdp02

CSS 필터를 적용하여 이미지를 저장하는 방법

답변

관련 문제