search

meltingice / CamanJS

Javascript HTML5 (Ca)nvas (Man)ipulation
http://camanjs.com
BSD 3-Clause "New" or "Revised" License
3.55k stars 404 forks source link

How to i can use filters (CamanJS) to background images? #69

Closed ghost closed 11 years ago

meltingice commented 11 years ago

Do you mean CSS background images? If so, you can't directly. The only way you would be able to make this work is if you had a hidden canvas, and you did something like:

Caman("#hidden-canvas", "/path/to/image.jpg", function () {
  this.brightness(20);
  this.render(function () {
    var img = this.toBase64();
    document.getElementById('other').style.backgroundImage = "url(" + img + ")";
  });
});
ghost commented 11 years ago

My idea - use same canvas element, instead of selector. Selectors, like "#hidden-canvas", can be used only in Mozilla Firefox "-moz-element(#hidden-canvas)", in webkit only if copy to "document.getCSSCanvasContext()" created context.

Will over 100 years, when all browsers begins support "element(#selector)" CSS property value. Over 100 year will not HTML5 or CSS3. This is will... for example... WebScript + XML.