Verwenden Sie JS, um Bilder zu bearbeiten, so dass nur Schwarzweiß übrig bleibt

Dieses Mal werde ich Ihnen einige Dinge zeigen, auf die Sie achten sollten, wenn Sie JS zum Bearbeiten von Bildern verwenden, um nur Schwarzweiß zu behalten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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.

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

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

Der JS-Code ist sehr einfach Nur mehr als 20 Zeilen, aber im Geiste der Lehre ist es besser, den Menschen das Angeln beizubringen, als den Quellcode unten zu veröffentlichen.

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 können das Canvas-Objekt über var drawing = document.getElementById('drawing') abrufen; hier verwenden wir 2D-Zeichnung
, um das context2d-Objekt mithilfe der Methode context2d = drawing.getContext('2d'); 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:

So verwenden Sie JS, um Duplikate beim Zusammenführen mehrerer Arrays zu entfernen

So verwenden Sie Promise to Operate die WeChat-Applet-API

Das obige ist der detaillierte Inhalt vonVerwenden Sie JS, um Bilder zu bearbeiten, so dass nur Schwarzweiß übrig bleibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!