1

I am a beginner programmer designing a website for smartphones and i have a background image for the body that i would like to slowly vary in color balance, alternating colors as if someone was tweaking the Photoshop color balance control bars a certain percentage in either direction. This is happening constantly while you are viewing the page, but slow enough so as to not be too distracting. Essentially, a color-changing background image.

Is it possible for this effect to be achieved on smartphones and how? Thanks!

heres a link to the bg image:
https://i.stack.imgur.com/Ksm7W.jpg

possible solutions i am thinking of (keeping in mind i am a novice): creating multiple images in different balance states and using a slow transition to smoothly shift from one to the next, or creating a looped animated image file and using it as a bg image. would either of these things work in my app?

mholberger
  • 337
  • 3
  • 14

1 Answers1

0

I found that this can be done using Canvas. I found this: Canvas - Change colors of an image using HTML5/CSS/JS?

The first comment describes it in detail and offers this jsfiddle example: http://jsfiddle.net/pHwmL/1/

function tintImage(imgElement,tintColor) {
    // create hidden canvas (using image dimensions)
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

    var map = ctx.getImageData(0,0,320,240);
    var imdata = map.data;

    // convert image to grayscale
    var r,g,b,avg;
    for(var p = 0, len = imdata.length; p < len; p+=4) {
        r = imdata[p]
        g = imdata[p+1];
        b = imdata[p+2];
        // alpha channel (p+3) is ignored           

        avg = Math.floor((r+g+b)/3);

        imdata[p] = imdata[p+1] = imdata[p+2] = avg;
    }

    ctx.putImageData(map,0,0);

    // overlay filled rectangle using lighter composition
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle=tintColor;
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // replace image source with canvas data

This will work for smartphones/browsers that support HTML5.

Community
  • 1
  • 1
Twisty
  • 30,304
  • 2
  • 26
  • 45
  • the effect im looking for would modify the original colors to look like multiple other colors through shifting the color balance. as i interpret it, this method "lacks luster" in that it converts the image to grayscale, then adds a tinted layer over it. – mholberger Apr 17 '13 at 06:49
  • if you are familiar with photoshop, under the 'adjustments' menu there is a color balance tool that allows you to adjust 3 different vectors: cyan-red, magenta-green, and yellow-blue. possible solutions i am thinking of (keeping in mind i am a novice): creating multiple images in different balance states and using a slow transition to smoothly shift from one to the next, or creating an animated image file and using it as a bg image. would either of these things work? – mholberger Apr 17 '13 at 06:55
  • Yes, you could, with Java Script, control the transition from image to image or simply animate it. An animated gif will work too, just less control for you when it's running and can be slow to load on the first run. – Twisty Apr 18 '13 at 19:52