JS-Operationsbild schwarz-weiß

Dieses Mal bringe ich Ihnen schwarz-weiße JS-Operationsbilder. Was sind die Vorsichtsmaßnahmen für schwarz-weiße JS-Operationsbilder?

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:

So verwenden und deaktivieren Sie die Vue-Auswahlkomponente

Erneutes Rendern vermeiden, wenn Sie React verwenden

Das obige ist der detaillierte Inhalt vonJS-Operationsbild schwarz-weiß. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!