JS-Schwarzweißeinstellungen für Bilder

Dieses Mal stelle ich Ihnen vor, wie Sie Schwarzweißbilder mit JS einstellen. Was sind die Vorsichtsmaßnahmen für die Einstellung von Schwarzweißbildern mit JS?

HTML5 hat das -Element eingeführt, das es uns ermöglicht, Bilder im -Bereich dynamisch zu zeichnen. Dieses Mal haben wir das Bild schwarzweiß gemacht, indem wir js verwendet haben, um das -Element zu bedienen.

Werfen wir zunächst einen Blick auf die Renderings

Die linke Seite ist das img-Tag und die rechte Seite ist die Leinwand Element-Tag. Die Struktur ist wie folgt:

Der Code von

<img src="1.jpg" style="width: 200px; height: 199px"/>
<canvas id="drawing" width="200" height="199" ></canvas>

JS ist sehr einfach und besteht nur aus mehr als 20 Zeilen. Im Einklang mit der Einstellung, Menschen das Angeln beizubringen, wird der Quellcode veröffentlicht unten. Lassen Sie uns zunächst über die Theorie sprechen.

1. Über Bilder

Jeder sollte wissen, dass das sogenannte Bild aus Pixeln besteht, also ein Bild der Größe 300*300 sind insgesamt 300*300 Pixel groß und jedes Pixel besteht aus drei Primärfarben (Rot, Grün, Blau) plus Transparenz (Alpha). Wenn wir also die Bilddaten des Bildes ändern möchten, ändern wir tatsächlich die Daten jedes Pixels des Bildes.

2. Über API

Wir verwenden var Drawing = <a href="http://www.php.cn/code/658.html%20" target="_blank">document<code>var drawing = <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.getElementById('drawing').getElementById('drawing'); Diese Methode kann das Canvas-Objekt abrufen. Das Canvas-Objekt bietet zwei Zeichenmethoden: 2D und 3D. Hier verwenden wir 2D-Zeichnung
Verwenden Sie die Methode context2d = drawing.getContext('2d'); , um das context2d-Objekt abzurufen. Nachdem wir das context2d-Objekt erhalten haben, erhalten wir die Bilddaten über die von context2d () bereitgestellte Methode getImageData() mit 4 Parametern, die jeweils die x- und y-Koordinaten des Bildschirmbereichs sowie die Pixelbreite und -höhe des Bereichs darstellen 🎜> var imagedata = context2d.getImageData(0, 0, image.width, image.height); 

ImageData-Objekte haben drei Eigenschaften: Breite, Höhe und

Daten. Das Datenattribut ist ein
Array, das die Daten jedes Pixels im Bild speichert. Und dargestellt durch Rot, Grün, Blau, Alpha. Wenn wir dann die Bilddaten des Bildes ändern möchten, müssen wir die Datenattributdaten von Bilddaten und die Werte von Rot, Grün, Blau und Alpha ändern.

Hier ist der Quellcode

function drawImageData () {
      var context2d = null;
      if(drawing.getContext) {
        context2d = drawing.getContext('2d');
      }
      if (context2d == null) {
        return;
      }
      var image = document.images[0];
      context2d.drawImage(image, 0 , 0);
      var imagedata = context2d.getImageData(0, 0, image.width, image.height);
      var data = imagedata.data;
      console.log('data: ' + data);
      var i,len,red,green,blue,alpha,average;
      for (i = 0 , len = data.length; i < len; i+=4) {
        red = data[i];
        green = data[i + 1];
        blue = data[i + 2];
        alpha = data[i + 3];
        average = Math.floor((red + green + blue) / 3);
        data[i] = average; 
        data[i+1] = average; 
        data[i+2] = average;
      }
      imagedata.data = data;
      context2d.putImageData(imagedata, 0, 0);
    }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Welche Schritte sind erforderlich, um die Art und Größe der hochgeladenen Bilder zu bestimmen?

So entfernen Sie Duplikate beim Zusammenführen mehrerer Arrays Daten

Detaillierte Erläuterung der Verwendung von React-Requisiten und Zustandsattributen

Das obige ist der detaillierte Inhalt vonJS-Schwarzweißeinstellungen für Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!