Leinwand - Ändern Sie Farben von einem Bild unter Verwendung von HTML5/CSS/JS?

Gibt es eine Möglichkeit, ändern Sie die Farben von einem Bild ähnlich wie in Flash/ActionScript mit, die nur mithilfe von HTML5/CSS/JavaScript?

Hier ist ein Beispiel in Flash: http://www.kirupa.com/developer/actionscript/color.htm EDIT: Das ist der Prozess, den ich wünschte, Sie zu vervielfältigen.

Ich versuche, etwas zu erreichen, wie hier (Farbwechsel Aspekt, die Erhaltung der Beleuchtung und den Schatten): http://www.acura.com/ExteriorColor.aspx?model=TL OHNE zu laden & ersetzen, ein neues Bild jedes mal; ich möchte in der Lage sein, um einfach die Farbe ändern Ton (also z.B. ein reines HTML5 - /CSS - /JS-Methode). EDIT: das ist das Ergebnis ich erzielen möchte, nicht der Prozess.

Grundsätzlich will ich die palette ändern/Ton in einem Bild, wobei die anderen Aspekte des Bildes (wie Steigung, Beleuchtung, etc.). Ich habe in der Nähe, aber nicht nah genug; ich bin zu dem Punkt, wo ich ein Bild verwenden, Maske und composite, die über das ursprüngliche Bild (wie eine Art transparentes Bild-overlay). Nachfolgend finden Sie einige Beispiel-code (bitte beachten: dies ist nur ein Ausschnitt, also es kann oder kann nicht arbeiten; ich bin nur die Anzeige von Beispiel-code, so bekommt man eine Idee von dem, was ich versuche zu tun):

<div id='mask'>
    <canvas id='canvas' width='100' height='100'></canvas>
</div>
<button data-rgba='255,0,0,0.5'>red</button>
<button data-rgba='0,255,0,0.5'>green</button>

<script>
foo = {};
foo.ctx = jQuery('#canvas')[0];
foo.ctx_context = foo.ctx.getContext('2d');
foo.mask = jQuery('#mask')[0];
foo.img = new Image();
foo.img_path = '/path/to/image_mask.png'; //100px x 100px image

foo.changeColor = function(rgba){
    foo.ctx_context.clearRect(0, 0, 100, 100);
    foo.ctx_context.fillStyle = 'rgba(' + rgba + ')';
    foo.ctx_context.fillRect(0, 0, 100, 100);
    foo.ctx_context.globalCompositeOperation = 'destination-atop';
    foo.ctx_context.drawImage(foo.img, 0, 0);
    foo.ctx_context.css({'background-image': "url(" + foo.ctx.toDataURL("image/png") + ")"});
};

jQuery("button").click(function(){
    foo.changeColor(jQuery(this).attr('data-rgba'));
});
</script>

Das Hauptproblem bei diesem Ansatz ist, dass die Bilder wirken sehr flach. Es ist etwas anderes fehlt, oder die Maske, die ich verwende (das ist eine Feste, weiße unregelmäßig geformten Bild), ist der falsche Ansatz.

Poste bitte ein ausgefülltes fiddle, sobald Sie haben Ihre Antwort. Danke!

InformationsquelleAutor James Nine | 2012-04-09

Diese Funktion erfordert, dass das image geladen, und es muss von der gleichen domain (aufgrund von cross-domain-policy)

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
    imgElement.src = canvas.toDataURL();
}

Vorausgesetzt das markup sieht wie folgt aus:

<img id='myimage' src='image.jpg'/>

Könnten Sie es durch den Aufruf mit den folgenden Parametern:

tintImage(
    document.getElementById('myImage'),
    "#550000" //for a redish tint
);

Beispiel hier: http://jsfiddle.net/pHwmL/1/

Beachten Sie, dass wenn Sie sagen, cross-domain, die Menschen mit chrome zu entwickeln, die lokal nicht in der Lage, um zu sehen, das so gut funktioniert (ich habe immer nur auf einem lokalen passthrough web-server, um zu überprüfen, es wird funktionieren.) Ich mochte Ihre Methode, fand aber, dass es überschrieben haben, alle alpha-Kanäle... also ich habe eine alphas-array, dann schrieb Sie wieder danach. Funktioniert gut. Code: github.com/jaycrossler/django-gamification/blob/master/...

InformationsquelleAutor lostsource

2

Sicher, Sie können die pixel-Daten, und tun, HSV Anpassungen auf. Die Methode, die Sie wollen, ist getImageData (das gibt einen UInt8Array, nicht eine normale js-array).

Gibt es einen interessanten Kommentar hier, das sollte Ihnen den Einstieg. Sie können layer transparente canvas-Elemente auf der jeweils anderen, die dazu beitragen sollen, dass keine Probleme mit dem anpassen von Basis-Komponenten (in deinem Beispiel Auto, Reifen, Fenster usw).

InformationsquelleAutor dmp
-2

In der Regel etwas wie ein Bild pixel für pixel ist etwas, was Sie tun würde, auf der server-Seite, da ist es sehr schwer für den browser. Im Fall der Acura website gibt es nichts kniffliges Los - Sie müssen nur eine Reihe von verschiedenen Jpg-Dateien. Sie könnten auch versuchen, in Processing.js.
- ich bin nicht zeichnen alles pixel für pixel; ich bin compositing ein Bild der Maske über ein vorhandenes Bild, was VIEL schneller ist als die Abfrage der back-end-jeder Zeit, um eine Farbe zu ändern. Was Acura macht, ist das Ergebnis ich erreichen möchte, aber NICHT den Prozess. Flash ändert sich die Farbe/Tönen so gut (es geht sofort), aber die traurige Realität ist, dass Sie können nicht verwenden Flash auf dem iPad, das ist, warum ich bin auf der Suche für eine HTML5-Lösung.
InformationsquelleAutor katherine

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.