alexmic / filtrr Goto Github PK
View Code? Open in Web Editor NEWInstagram-like image filters in pure JavaScript.
Home Page: http://filtrr.me
Instagram-like image filters in pure JavaScript.
Home Page: http://filtrr.me
Your library is amazing. I've played around with the effects and noticed that "Brighten" and "Contrast" algorithms where different from what Photoshop layer effects output. I've decided to improve on your effects and think it might be interesting to implement them.
Check my gist
https://gist.github.com/8dbdedc2f2b88f07e1c8
I am trying to change the image source dynamically from db. But the function is not allowing me to change the image.
id = imagename;
$('.tempimage').attr("id","#"+id);
$('.tempimage').attr('src',image);
var my = Filtrr2($("#"+id), function () {
var dup = this.dup();
dup.fill(r,g,b);
this.contrast(100).saturate(-100).layer("overlay", dup).render();
var canvas = document.getElementById('filtrr2-image1');
var ctx = canvas.getContext('2d');
drawEngine.setImgBackplate(canvas.toDataURL());
});
There doesn't seem to be a way to reset the Filtrr2 object once you have applied an effect to it. Trying to recreate a new Filtrr2 object on the same canvas element doesn't work either so if I apply a brighten(50) effect on a canvas and want to then apply a sepia() effect on the same canvas but from the original image and not the current image, it doesn't work.
Redrawring the original image to the canvas and then applying the new effect doesn't work either.
Any chance of adding a reset() function that would clear all effects?
Is there a way to serialize the image and save it to the server, possibly in a post request?
Do you plan on releasing this for Node.js on npmjs.org?
From Paul Irish:
glfx.js does exactly what you suggest, leveraging WebGL shaders to do high performance image manip. It's likely fltrr could use glfx.js under the hood for very low-latency manip.
Hello, first good work on the filter working great on pc (mac i7 ). However i tried on mobile safari 3g and inside phonegap webkit application and it is super slow, i tried these filteres http://www.html5rocks.com/en/tutorials/canvas/imagefilters/ and they are working fine on mobile.
I added a comment on quora about the filters processing being so slow.
Great job on the filters!
Is there a way to convert the newly created canvas back to an image? I would like to save the image after its filtered. Is there a way to do that?
Lomography without vignettes?!
As proposed on HN:
You should rewrite a "pseudo-non-blocking" implementation of these filters. Right now they block the UI thread for too long, which limits how useful these can be. Web workers in one option, although it's not widely supported. The better option is to use setTimout or setInterval to break of the processing work into chunks, which is supported in all browsers. For example, run the loop n iterations then run the next n after a 15 ms delay. The way you've implemented the processing right now makes this lib unsuitable for use on the clientside.
It seems there is a security issue when you both use images hosted on an external domain and the dup method. With such a setup, the filter only work once, then returns an error.
One could suggest a better softLight function (as defined by Yahvuu http://yahvuu.wordpress.com/2009/09/27/blendmodes1/). The results are more in tune with Photoshop and GIMP this way.
softLight: function(bottom, top)
{
var c = function(b, t) {
b /= 255; t /= 255;
return (t < 0.5) ? 255*((1-2*t)*b*b + 2*t*b) : 255*((1-(2*t-1))*b+(2*t-1)*Math.pow(b, 0.5));
};
apply(bottom, top, function(b, t)
{
b.r = c(b.r, t.r);
b.g = c(b.g, t.g);
b.b = c(b.b, t.b)
});
}
Port Filtrr's functionality to Filtrr2.
It does not load.
Filtrr was a weekend hack - filtrr2 will be fuller, better-tested library.
abandonned due to the discover of ImageMagick
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.