HTML5-Übungen zum Einstellen von Bildern auf Graustufen_html5-Tutorial-Fähigkeiten

Um Graustufenbilder im Web anzuzeigen, musste man früher diese manuell mithilfe einer Bildsoftware konvertieren. Doch nun lässt sich dieser Prozess mit Hilfe von HTML5 Canvas realisieren, ohne dass eine Bildbearbeitungssoftware erforderlich ist. Ich habe eine Demo mit HTML5 und JQuery erstellt, um zu zeigen, wie diese Funktion implementiert wird.

Zweck Diese Demo zeigt Ihnen, wie Sie mit HTML5 und jquery zwischen dem Graustufenbild und dem Originalbild wechseln, wenn sich die Maus aus dem Bild bewegt. Vor dem Aufkommen von HTML5 mussten Sie zur Implementierung dieser Funktion zwei Bilder vorbereiten, ein Graustufenbild und ein Originalbild. Mit Hilfe von HTML5 gelingt dies nun jedoch schneller und einfacher, da das Graustufenbild direkt auf dem Originalbild generiert wird. Ich hoffe, dass dieser JS-Code hilfreich ist, wenn Sie eine Datei- oder Bildanzeigefunktion erstellen.

Rendering JQuery-Code Der folgende JQuery-Code findet das Zielbild und generiert eine Graustufenversion. Wenn Sie mit der Maus über das Bild fahren, ändert sich das Graustufenbild in die Primärfarbe.

Code kopieren Der Code lautet wie folgt: // Das Fensterladeereignis ist so eingestellt, dass es auf alle wartet Zu ladende Bilder. Führen Sie $(window).load(function(){ // aus, um das Bild einzublenden, sodass das Originalbild mit Farbe nicht angezeigt wird, und führen Sie dann das Laden des Fensters aus event $( ".item img").fadeIn(500); //Bild kopieren $('.item img').each(function(){ var el = $ (this); el.css({"position":"absolute"}).wrap(" ").clone() .addClass('img_grayscale' ).css({"position": "absolute", "z-index": "998", "opacity": "0"}).insertBefore(el).queue(function(){ var el = $(this); el.parent().css({"width":this.width,"height":this.height}); }); this.src = greyscale(this.src>}); // Bild einblenden lassen $('.item img').mouseover( function(){ $(this).parent().find('img:first').stop().animate({opacity:1}, 1000}) $( '.img_grayscale').mouseout (function(){ $(this).stop().animate({opacity:0}, 1000); }); // Canvas verwenden, um graue Bilder zu erstellen function greyscale(src){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.height; 0); var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); for(var y = 0; y for (var x = 0; x &lt ; imgPixels.width; x ){ var i = (y * 4) * imgPixels.width x [i 2]) / 3; i] = avg; imgPixels.data[i 1] = avg; } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL(); So verwenden Sie Folgen Sie den folgenden Schritten: Referenz jquery.js Kopieren Sie den obigen Code Legen Sie das Zielbild fest (z. B. .post-img, img , . gallery img usw.) Sie können auch die Geschwindigkeit der Animation einstellen (z. B. 1000 = 1 Sekunde) Kompatibilität Ich habe alles versucht das HTML5- und Canvas-Browser wie Chrome, Safari und Firefox unterstützt. Wenn es sich um einen Browser handelt, der HTML5 nicht unterstützt, verwendet er nur das Originalbild und generiert kein Graustufenbild. Hinweis: Wenn die lokale HTML-Datei nicht unter Firefox und Chrome ausgeführt werden kann, müssen Sie die HTML-Datei auf dem Server bereitstellen.

Selbstübung Ich habe es anhand des Tutorials selbst getestet und festgestellt, dass einige Dinge beachtet werden müssen. Als ich die Seite mit Firefox öffnete, lief das Programm jedoch nicht richtig Nach der Bereitstellung des relevanten Codes auf dem Server funktioniert es. Es muss sich um ein lokales Image handeln, andernfalls wird ein Sicherheitsfehler gemeldet. Dies liegt daran, dass : Canvas ein Canvas-Element im HTML5-Standard ist und zum Zeichnen von 2D- und 3D-Bildern verwendet werden kann. Beim Debuggen kann es jedoch leicht zu Sicherheitsproblemen kommen . Derzeit treten die Sicherheitsfehler, die ich beim Debuggen festgestellt habe, hauptsächlich in toDataURL() und src auf. Sicherheitsfehler bedeuten, dass dieser Code aus Sicherheitsgründen nicht normal ausgeführt werden kann >

Sicherheitsfehler auslösen : Verwendung domänenübergreifender Bilder in Canvas Debugging in einer lokalen serverlosen Umgebung Die Beziehung zwischen der aktuellen Domäne und dem Bild kann nicht abgerufen werden In einigen auf Stackoverflow gefundenen Lösungen können Sie normalerweise domänenübergreifende Probleme lösen. Tatsächlich tritt dieses Problem jedoch auch auf, wenn Sie beim lokalen Debuggen keine Serversoftware verwenden Beim lokalen Debuggen werden derzeit in Canvas Sicherheitsfehler ausgegeben. Eine gängige Lösung besteht darin, eine Serverumgebung lokal einzurichten oder den Inhalt an den Server zu senden Debuggen.