How To Save An Image With Css Filter Applied
I am wondering how I can apply a CSS filter to an image and then save the image to disk. For example, I have an image tag, I can apply a sepia effect via CSS img.sepia{ filter: s
Solution 1:
You could write the image to a canvas element, set the filter you want in javascript and then download that. So it would be something like this
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);
functiondownload() {
var dt = canvas.toDataURL('image/jpeg');
this.href = dt;
};
img{
width:400px;
height:400px;
}
<imgsrc=""id="dataimage" /><canvasid="image"width="400px"height="400px"></canvas><aid="download">Download image</a>
Solution 2:
Check the browser compatibility before you choose the canvas method: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
It's not supported on most mobile browsers.
I use an image service like Cloudinary.
Post a Comment for "How To Save An Image With Css Filter Applied"