CODEWITHSUNDEEP
javascriptcolors
ArmoredCavalry
ArmoredCavalry

Reputation: 11

Is there any way to change the hue of an entire webpage client side?

Haven't been able to find any sort of information about this. Seems like it should be possible...

Is there any way to change the hue of an individual element (like say an image) with js?

Upvotes: 1

Views: 620

Answers (3)

zem
zem

Reputation: 1257

If you want to tint the image a specific color, you could overlay a translucent colored div.

If you mean actually shifting the hues of the image, as you might do in Photoshop, I don't believe JavaScript can do that in any major browsers.

Upvotes: 0

Mikee
Mikee

Reputation: 2563

The only way I can think of doing it is something along these lines:

  1. Go through every element in the page, find it's COMPUTED background color and text color. Use something like ColorJizz to change the hue.
  2. Find every image - including backgrounds images. Maybe again you could do this by finding the computed styles. It'd be tricky.. You then have the option of either redirecting them to a server side script that can change the hue of those, or replacing them with a canvas element and going through every pixel and changing the color of that. Again - colorjizz would work for this, but it'd be VERY slow.

Generally though, I wouldn't recommend doing any of this. It'd be VERY hard to get right.

Upvotes: 0

alex
alex

Reputation: 490453

You can access an image's data using the canvas API. Then you can change the colours. This can be very expensive though (take a little while to render).

For doing the whole page, you could do

#overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: red;
    opacity: 0.7; /* check IE's proprietary filter */
}

Upvotes: 1

Related Questions