1

I can't seem to find exactly what I am looking for, so maybe one of you can help me.

I'm trying to convert a background image of a div from color to grayscale. Uploading a version of it is not an option as this would be millions of photos a day, and storage capacity could be huge.

These images are stored on Facebook in color, and I would like to grab them and change them to grayscale and display them, or perhaps overlay the entire container in grayscale or something like that.

Any ideas/solutions?

This can be done using HTML5 canvas.

ehftwelve
  • 2,787
  • 2
  • 20
  • 25
  • Just to clarify, you're trying to do it with Canvas, or you can do it in canvas and you're trying to do it in JS? – Dan Crews Dec 27 '11 at 20:17
  • possible duplicate of [Convert an image to grayscale in HTML/CSS](http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css) – robertc Dec 27 '11 at 20:45
  • @robertc im not sure the solution is cross-domain capable though – ehftwelve Dec 27 '11 at 20:52
  • @robertc this is for doing an image. I want to do a background image, I have tried it and it does not work – ehftwelve Dec 27 '11 at 21:00
  • @DanCrews What I'm saying is canvas is an option, but is not required. Any method that is best is preferred – ehftwelve Feb 28 '12 at 05:20
  • I just post a way to do it with JQuery and HTML5 canvas using "background-image" CSS rule in this thread: http://stackoverflow.com/questions/7704415/how-to-apply-the-grayscale-jquery-plugin-to-a-background-image/24949717#24949717 – lepe Jul 25 '14 at 06:55

2 Answers2

0

I've used information from this source with some success in the past. The only limitation is that the images to greyscale must be on the same server as the script. Seems to work across browsers without native support (which is any non-IE):

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

mattacular
  • 1,849
  • 13
  • 17
  • The problem is that it is definitely not on the same server or domain. I guess I could create a proxy script that grabs it for me – ehftwelve Dec 27 '11 at 20:43
0

Let's try this approach:

var divid = $('#DIVID');
var currentBG = divid.css('background-image');
divid.html('<img src="'+currentbg+'" class="grescaled" />');
divid.css('background-image', '');

By doing the above, you actually extract the background image of that particular DIV, reset the background to 'nothing', then insert a dynamic IMG tag inside the same DIV showing just the same image but this time with a CSS class greyscaled.

In your CSS file, add the following lines:

.greyscaled { filter: url(/filters.svg#grayscale); filter: gray; -webkit-filter: grayscale(1); }

Now, create a file in your document root named filters.svg, with the contents below which will actually do the effect on the contained IMG.

<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
</filter>
</svg>

Just in case you want to put everything in place onmouseout, you can reverse your actions onmouseout to put the IMG back into the DIV's background.

Ruslan Abuzant
  • 631
  • 6
  • 17