2010-12-11 3 views

Antwort

16

Einfachste Weise, die ich mir vorstellen kann, überlagert ein halbtransparentes div über das Bild.

Ein kleines Beispiel:

HTML

<div id="overlay" class="overlay"></div> 
<img id="myimg" src="img.jpg" /> 

CSS

.overlay 
    { 
    display: block; 
    position: absolute; 
    background-color: rgba(200, 100, 100, 0.5); 
    top: 0px; 
    left: 0px; 
    width: 0px; 
    height: 0px; 
    } 

JS (mit JQuery)

overlay = $("#overlay"); 
img = $("#myimg"); 
overlay.width(img.css("width")); 
overlay.height(img.css("height")); 
overlay.css("top", img.offset().top + "px"); 
overlay.css("left", img.offset().left + "px"); 
+0

Schöne Idee - eine einfachere, schnellere Lösung für die Verwendung von GD/ImageMagick mit PHP, vor allem, wenn das OP nicht PHP verwenden kann! – Bojangles

+0

Ausgezeichnete Idee! Arbeitete großartig und ersparte mir viel Zeit mit js colorizing libraries. – Nacho

+0

Hier ist ein Kinderspiel. http://jsfiddle.net/yewTq/. Unerwartet wendet diese Technik den Farbton auf den Bereich um das Bild an. – Billy

-1

Ich bin mir nicht sicher, ob Sie PHP verwenden, aber es ist nicht möglich mit JavaScript/jQuery. Mit PHP können Sie die GD-Bildbibliothek verwenden, um das Bild vor dem Senden an den Client zu tönen. This thread sollte helfen :-)

Auch this forum thread spricht über ImageMagick, um das Bild auch zu tönen.

Es tut mir sehr leid, wenn Sie nicht/nicht PHP verwenden können, aber JavaScript kann nicht tun, was Sie wollen.

James

+0

es kann, siehe meine Antwort =) –

+0

Dies ist keine Link-only-Antwort, aber nur knapp, so dass andere Rezensenten wahrscheinlich entscheiden, es zu löschen.Fügen Sie einige Inhalte von diesen Links ein, wenn Sie sie speichern möchten. –

4

nico Antwort ist toll, wenn man nach einem einfachen Hauch von einer Farbe ist - aber wenn Sie sprechen sind entsättigt ein Bild und dann eine Tönung Anwendung (so dass das Bild nur in grün zum Beispiel), dann können Sie einen Blick auf der Bildbearbeitung haben mit <canvas>

nach einigen googeln, fand ich diese Bibliothek für die Leinwand, die auf der foto~~POS=TRUNC Operationen konzentriert: https://github.com/meltingice/CamanJS