Is it possible to apply CSS3 filters to an image, then download the image?
try to convert the pic to base64 after the filter applied using javascript and then let the user download it.
Save images after using CSS filter
You can't save images directly, but you can render them in Canvas, then save from there.
See: Save HTML5 canvas with images as an image
How do I save a canvas with filters applied, using these stackoverflow answers?
Let's look at this this part from your question, because if you're only supporting browsers where this works, it's all you need:
Again, I'm lost on the application of the non-CSS filters: How to save image from canvas with css filters
The context's filter
property works just like CSS filters – it takes the same functions – but the important thing to know is that, unlike for CSS, applying a filter to the context does not change the canvas' current image. It only applies to subsequent drawing operations.
Here is an example. When you run the code snippet below, you'll see two canvases. The first one has a CSS filter
applied, the second one hasn't (as evidenced by the fact the border of the first canvas is blurry and pink, while the second is crisp and green).
When you then click the "Copy image" button, the code
- Looks at what CSS filters currently apply to the first canvas,
- applies this filter value to the second context,
- draws the first canvas onto the second one.
Because of 2), the drawing operation in 3) will have the filter applied.
The second canvas now looks like the first one, but the second canvas now truly contains the hue-rotated and blurred pixels, while the first one still has red and clear pixels – you just don't see that because of the CSS filter.
At this point, you can save the second canvas as an image, and it will look as expected.
window.onload = function () { var cnv1 = document.getElementById("canvas1"); var ctx1 = cnv1.getContext("2d"); var cnv2 = document.getElementById("canvas2"); var ctx2 = cnv2.getContext("2d"); ctx1.font = "30px sans-serif"; ctx1.fillStyle = "red"; ctx1.fillText("Hello world!", 30, 80);
var button = document.getElementById("button"); button.onclick = function () { // take whatever CSS filter is applied to the first canvas var cssFilter = getComputedStyle(cnv1).filter; // use that filter as the second canvas' context's filter // all subsequent drawing operations will have this filter applied ctx2.filter = cssFilter; // take whatever is in canvas 1 and draw it onto canvas 2 // the text on cnv1 is red and un-blurred (it's only the css // that makes it look otherwise), but the above filter will // cause blurring and hue-shifting to be applied to the drawImage // operation ctx2.drawImage(cnv1, 0, 0); };}
* { vertical-align: top;}
canvas { border: 2px solid green;}#canvas1 { filter: blur(2px) hue-rotate(180deg);}
<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas>
<button id="button">Copy image</button>
Related Topics
IE8 Alternative to Window.Scrolly
HTML Canvas: How to Draw a Flipped/Mirrored Image
How to Host Material Icons Offline
How to Generate Image Sprites in Ember-Cli Using Compass
How to Style Canvas Elements with CSS
A Way to Count Columns in a Responsive Grid
Firefox Not Able to Enumerate Document.Stylesheets[].Cssrules[]
Detect and Log When External JavaScript or CSS Resources Fail to Load
Setting Multiple Style.Background Values
Fixed/Absolute Positioning Neglected in iOS When Focusing on Input
Play Pause HTML5 Video JavaScript
Googlemaps Does Not Load on Page Load
Disable Zoom on Input Focus in Android Webpage
JavaScript - Check If String Is Valid CSS Color
Jquery: How to Get Assigned Font to Element
List Reorder Animation with Angularjs
Why Are CSS Keyframe Animations Broken in Vue Components with Scoped Styling