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
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!
