So erstellen Sie Bilder mithilfe von JavaScript_Javascript-Kenntnissen in Schwarzweiß

Dieser Artikel stellt hauptsächlich den Implementierungscode von Schwarzweißbildern mit JS vor. Jetzt können Freunde, die ihn benötigen, darauf verweisen.

HTML5 hat das Element 5ba626b379994d53f7acf72a64f9b697 eingeführt Wir verwenden js, um Bilder dynamisch im 5ba626b379994d53f7acf72a64f9b697-Bereich zu zeichnen. Dieses Mal haben wir das Bild schwarzweiß gemacht, indem wir js verwendet haben, um das 5ba626b379994d53f7acf72a64f9b697-Element zu bedienen.

Werfen wir zunächst einen Blick auf die Darstellungen

Das img-Tag befindet sich auf der linken Seite und das Canvas-Element-Tag auf der rechten Seite. Die Struktur ist wie folgt folgt

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

Der JS-Code ist sehr einfach, mit nur mehr als 20 Zeilen, jedoch im Einklang mit der Einstellung, den Menschen eher das Fischen beizubringen Wenn Sie den Leuten das Angeln beibringen, wird der Quellcode unten veröffentlicht. 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 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 code> var imagedata = context2d.getImageData(0, 0, image.width, image.height); var imagedata = context2d.getImageData(0, 0, image.width, image.height); <br>

Das ImageData-Objekt hat drei Eigenschaften: width, height und
data . 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);
    }

Verwandte Empfehlungen:

So programmieren Sie detailliertes JavaScript Implementieren Sie eine schnelle Sortierung

Wie JavaScript die Blasensortierung auf gekapselte Weise implementiert

Detaillierte Erläuterung des JavaScript-Betriebsmechanismus und konzeptionelle Analyse

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Bilder mithilfe von JavaScript_Javascript-Kenntnissen in Schwarzweiß. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!