Kommentar: Wenn Sie in der Vergangenheit Graustufenbilder im Web anzeigen wollten, konnten Sie die Bildsoftware nur manuell verwenden, um sie umzuwandeln. Jetzt kann dieser Prozess jedoch mit Hilfe von HTML5 -Leinwand erreicht werden, ohne dass die Bildbearbeitungssoftware verwendet werden muss
Wenn Sie in der Vergangenheit Graustufenbilder im Web anzeigen wollten, konnten Sie nur manuelle Bildsoftware verwenden, um sie zu konvertieren. Jetzt kann dieser Prozess mit Hilfe von HTML5 -Leinwand erreicht werden, ohne dass die Bildbearbeitungssoftware verwendet werden muss. Ich habe HTML5 und JQuery verwendet, um eine Demo zu machen, um zu zeigen, wie diese Funktion implementiert werden kann.Zweck
Diese Demo zeigt Ihnen, wie Sie zwischen dem Graustufenbild und dem Originalbild wechseln, wenn Sie die Maus auf dem Bild mit HTML5 und JQuery bewegen. Bevor HTML5 erschien, um diese Funktion zu implementieren, müssen zwei Bilder vorbereitet werden, ein Graustufenbild und ein Originalbild. Aber jetzt kann es mit HTML5 schneller und einfacher erreicht werden, da Graustufenbilder direkt auf dem Originalbild generiert werden. Ich hoffe, dieser JS -Code ist hilfreich, wenn Sie Dateien oder Bildanzeigenfunktionen erstellen.
Reproduktionsdiagramm
JQuery Code
Der folgende JQuery -Code sucht nach dem Zielbild und generiert eine Graustufenversion. Wenn Sie Ihre Maus auf das Bild verschieben, verwandelt sich das Graustufenbild in die Primärfarbe.
<script src = "jQuery.min.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
// Setzen Sie das Fenster -Laden -Ereignis so, dass alle Bilder vor dem Ausführen geladen werden müssen
$ (Fenster) .load (function () {
// Erstellen Sie das Bild allmählich ein, damit das Originalbild mit Farbe nicht angezeigt wird, und führen Sie dann das Fensterladeereignis aus
$ (". Artikel img"). Fadein (500);
// das Bild kopieren
$ ('. item img'). Jede (function () {
var el = $ (this);
el.css ({"Position": "Absolute"}). Wrap ("<div>"). Clone (). AddClass ('img_graysCale').
var el = $ (this);
El.Parent (). CSS ({"width": this.width, "Höhe": this.height});
El.Dequeue ();
});
this.src = grayscale (this.src);
});
// Machen Sie das Bild allmählich ein
$ ('. item img'). mouseover (function () {
$ (this) .Parent (). Find ('img: First'). Stop (). Animate ({Opazität: 1}, 1000);
})
$ ('. img_grayscale'). Mouseout (function () {
$ (this) .Stop (). Animate ({Opazität: 0}, 1000);
});
});
// Graue Bilder mit Leinwand machen
Funktion Graustufen (SRC) {
var canvas = document.createelement ('canvas');
var ctx = canvas.getContext ('2d');
var imgobj = new Image ();
imgobj.src = src;
canvas.width = imgobj.width;
canvas.height = imgobj.height;
ctx.drawimage (imgobj, 0, 0);
var imgpixels = ctx.getImagedata (0, 0, canvas.width, canvas.height);
für (var y = 0; y <imgpixel.Height; y ++) {
für (var x = 0; x <imgpixels.width; x ++) {
var i = (y * 4) * imgpixels.width + x * 4;
var avg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;
imgpixels.data [i] = avg;
imgpixels.data [i + 1] = avg;
imgpixels.data [i + 2] = avg;
}
}
ctx.putimagedata (imgpixels, 0, 0, 0, imgpixels.width, imgpixels.Height);
return canvas.todataurl ();
}
</script>
Wie man benutzt
Befolgen Sie die folgenden Schritte:
Zitat jQuery.js
Kopieren Sie den obigen Code
Setzen Sie das Zielbild (z. B. .post-IMG, IMG, .Gallery IMG usw.)
Sie können auch die Geschwindigkeit der Animation einstellen (dh 1000 = 1 Sekunde)
Kompatibilität
Ich habe alle Browser ausprobiert, die HTML5 und Leinwand unterstützen, wie z. B. Chrome, Safari und Firefox. Wenn es sich um einen Browser handelt, der HTML5 nicht unterstützt, verwendet es nur das Originalbild und generiert keine Graustufenbilder.
Hinweis: Wenn die lokale HTML -Datei nicht auf Firefox und Chrome ausgeführt wird, müssen Sie die HTML -Datei auf dem Server bereitstellen.
Selbstgeschwindigkeit
Ich habe es selbst nach dem Tutorial getestet und fand einige Dinge, auf die sie beachtet werden sollen. Ich habe die Seite mit Firefox geöffnet. Das Programm kann nicht korrekt ausgeführt werden, aber es kann nach der Bereitstellung des entsprechenden Codes für den Server ausgeführt werden.
Es muss garantiert ein lokales Bild sein, andernfalls müssen Sie einen Sicherheitsfehler melden.
Das liegt daran, dass:
Leinwand ist ein Canvas -Element im HTML5 -Standard und kann zum Zeichnen von 2D- und 3D -Bildern verwendet werden.
Es ist jedoch einfach, beim Debuggen Sicherheitsfehlerprobleme zu begegnen.
Derzeit erscheinen die Sicherheitsfehler, die ich beim Debuggen aufgetreten bin, hauptsächlich auf Todataurl () und SRC.
Sicherheitsfehler zeigt an, dass dieser Code keine semantischen Probleme hat, aber aus Sicherheitsgründen nicht normal ausgeführt wird.
Die Situation des Wurfsicherheitsfehlers:
Verwenden von Cross-Domänen-Bildern in Leinwand
Debugging in einer lokalen serverlosen Umgebung
Die Beziehung zwischen der aktuellen Domäne und dem Bild kann nicht erhalten
Einige der Lösungen, die auf Stackoverflow gefunden wurden, müssen in der Regel Probleme mit der Domäne lösen.
Wenn Sie jedoch die Serversoftware während des lokalen Debuggens nicht verwenden, wird dies auch dieses Problem verursachen.
Zum Beispiel: Die Todataurl -Funktion wird beim lokalen Debuggen verwendet, und die lokale Bilddatei wird in Leinwand verwendet. In Chrome und Firefox wird immer noch Sicherheitsfehler geworfen.
Eine gemeinsame Lösung besteht darin, eine Serverumgebung lokal einzurichten oder den Inhalt zum Debuggen an den Server zu senden.