jQuery Bild in Graustufen konvertieren?

Question

Ich bin neu bei jQuery und mag es wirklich. Ich würde gerne wissen, ob es einen ähnlichen Effekt wie IE gibt, in dem ich Bilder in der Laufzeit in Graustufen konvertieren kann?

Answer 1

Ich glaube nicht, dass jQuery eine spezielle Möglichkeit hat, es zu tun, aber Sie können das <canvas>-Tag verwenden. see tutorial

Answer 2

Check out pixastic ... wird angenommen, in Arbeit ...

• Internet Explorer 5.5+
• Opera 9.5+
• Firefox 2+
• WebKit Nightly

http://www.pixastic.com/lib/docs/actions/desaturate/

var img = new Image(); 
img.onload = function() { 
    Pixastic.process(img, "desaturate", {average : false}); 
} 
document.body.appendChild(img); 
img.src = "myimage.jpg"; 

Answer 3

Es ist ein Beispiel für diese in umgekehrter Reihenfolge durchgeführt werden (Farbe in Graustufen) mit jQuery auf:

http://www.sohtanaka.com/web-design/examples/hover-over-trick/

Ich stelle mir es einfach genug sein würde, dies rückgängig zu machen, so dass es von grau zu färben ging. Der Code selbst sieht sehr einfach und elegant aus.

Answer 4

Sie können diesen Trick auch verwenden, wenn Sie nur versuchen, das Bild beim Schweben grau zu skalieren. http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

Answer 5

Hier ist meine einfache jQuery-Plugin: jquery-grayscale

Sie führen Sie es mögen:

$('img').grayscale(); 

Es nutzt <Leinwand>, damit es nicht in älteren Browsern.

Answer 6

Ich habe ein jQuery-Plugin namens $.greyScale() geschrieben, das dies für Sie tut. Es unterstützt Bilder, die in einer anderen Domäne gehostet werden, indem auch Anfragen weitergeleitet werden.

Es wird aufgerufen, nur durch

$('img').grayScale(); 

Answer 7

mit ich alle hier aufgeführten versucht und sie auch nicht funktioniert (entweder zu viel zu tun auf schweben wie Anbringen oder einfach nicht funktioniert in allen Browsern oder Domänen). Also habe ich selbst einen ausgepeitscht, was sehr kurz und prägnant ist: https://github.com/arturnt/jquery.grayscale.js