alexmic / filtrr

Instagram-like image filters in pure JavaScript.

If you are looking for filtrr.js it is now deprecated and removed.

Please use the more awesome filtrr2.

filtrr's Issues

Canvas id is filtrr-undefined if img has no id.

Save image to server

Is there a way to serialize the image and save it to the server, possibly in a post request?

Deprecate filtrr.

Filtrr was a weekend hack - filtrr2 will be fuller, better-tested library.

Filtrr.me is down.

Website is Down

It does not load.

Improve brightness and contrast algorithm

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

css width and height of image is overriden by actual image width and height

Filters extremly slow on mobile safari

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.

Use Filtrr on server-side

abandonned due to the discover of ImageMagick

Blending modes API

Port Filtrr's functionality to Filtrr2.

Implement curves and exposure.

Saving the canvas as an image

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?

Website filtrr.me not working

First one is greeted with this:

Followed by a 404.

Implement a vignette effect.

Lomography without vignettes?!

Investigate glfx.js

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.

Implement a bias effect.

Implement pseudo-nonblocking rendering.

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.

Improve "softLight"

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

Filtrr2 not executing on realtime

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

Node.js

Do you plan on releasing this for Node.js on npmjs.org?

Implement fisheye.

Exporting method.

Security issue when using dup() and images on external domain.

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.

Resetting of Filtrr

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?