javascript - How to save an image with CSS filter applied - Stack Overflow

admin管理员组

文章数量:1341392

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: sepia(20%);
}

And apply the class to an image tag in the HTML

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

How can I save that image with the 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: sepia(20%);
}

And apply the class to an image tag in the HTML

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

How can I save that image with the filter applied?

• javascript
• jquery
• css
• filter

Share Improve this question Follow edited Oct 8, 2016 at 6:42 Jason Yost 4,94777 gold badges4646 silver badges6565 bronze badges asked Oct 4, 2016 at 14:26 RahulRahul 1,07922 gold badges99 silver badges1717 bronze badges 5

• Screen grab – adeneo Commented Oct 4, 2016 at 14:28
• You can always take screenshots from screen if you are looking for your own use. – poush Commented Oct 4, 2016 at 14:29
• 1 Nope, i basically wants to use it for my website. so if i upload a photo to website so i can apply filter on it by css and then save it to my gallery. – Rahul Commented Oct 4, 2016 at 15:29
• You cannot access the file system from JavaScript running in a browser. – rockerest Commented Oct 4, 2016 at 15:49
• Yes exactly you cannot save the images ... but, give user a prompt to save the image .. Use html2canvas.hertzen. to take screenshot of any size from the browser page. . – Atul Sharma Commented Oct 4, 2016 at 18:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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);


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>

Check the browser patibility before you choose the canvas method: https://developer.mozilla/en-US/docs/Web/API/CanvasRenderingContext2D/filter

It's not supported on most mobile browsers.

I use an image service like Cloudinary.

本文标签： javascriptHow to save an image with CSS filter appliedStack Overflow