1

I've a very strange requirement, I've an image(Image has slight gradient effect) which center portion need to be shown with the color change with the user score colour 255,255,0 for High Score and 155,155,55 for Low Score

Now I want to know which way should I do it, I tried it with the HTML5 Canvas but that wouldn't work with the IE, so I'm discarding this option

I don't know it can be done with the css or not

Or with the GD lib using PHP

HERE is the image http://i47.tinypic.com/b88l13.png

Thanks

MZH
  • 1,414
  • 4
  • 29
  • 57
  • 3
    I simply can't believe how many people simply IGNORE new technologies just because older IE browsers don't support them... Just go with the canvas if you know how to do it... Worst idea would be to use PHP... You can also use CSS gradients. You can look over ready-made image-processing javascript libraries like http://www.pixastic.com/lib/docs/ – XCS Jan 26 '13 at 01:21
  • 2
    Unfortunately at the time of agreement, I agreed that the functioanlity would support till IE8, and IE8 lacks many HTML5 features, thats why I'm searching for alternate way, that can work with IE as well. – MZH Jan 26 '13 at 01:26
  • How many images will I generate from 255,2550 to 155,155,55. that would be very odd – MZH Jan 26 '13 at 01:27
  • php gd would be the way to go .... – Landon Jan 26 '13 at 01:36

1 Answers1

1

I have developed several projects using the Processing.js library and I fell in love with it. If you want you can try it, you could do what you asked in a few lines using http://processingjs.org/reference/tint_/ .

PImage b; 
b = loadImage("http://i47.tinypic.com/b88l13.png");

void setup(){
  size(200,200);
}

void draw(){  
   tint(255, 0, 0); 
   image(b, 0, 0);   
}

You may want to split the colored (pyramid) part from the background and only tint that part.

Note that in the demo I have used the Base64 version of that image to avoid cross-domain policy issues. DEMO: http://jsfiddle.net/CrUja/

It works in IE9 and I think you can make it work in IE8 using http://code.google.com/p/explorercanvas/ (or maybe Processing.js already has this integrated)

Community
  • 1
  • 1
XCS
  • 27,244
  • 26
  • 101
  • 151
  • Thanks, this is really good, I'll try it, I was testing it with PHP, I cut that daimond as u said, apply effect and merge with bg – MZH Jan 26 '13 at 02:02
  • The good part with Processing.js is that you can easily create animations: http://jsfiddle.net/CrUja/1/ – XCS Jan 26 '13 at 09:55
  • Yes, Thanks. are u sure this explorercanvas would work with IE8, b/c IE 8 doesn't support canvas at all – MZH Jan 26 '13 at 10:25
  • Well, that's what the description says: "Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer" – XCS Jan 26 '13 at 10:26