Inhaltszusammenfassung: Dieser Artikel zeigt die allgemeinen Schnittstellen von Canvas bei Bildpixeldatenoperationen anhand einfacher Codebeispiele und einer etwas erbärmlichen Bilddemo. Wie Sie diese Schnittstellen nutzen können, um komplexere Effekte zu erzielen, werden wir in den folgenden Kapiteln weiter beschreiben.
1. Canvas-Bilddaten festlegen/abrufen 4. Ein paar Ergänzungen zu imageData.data; Bild Ausfüllen
/**
* @description
* @param {Number} x Der Abstand zwischen dem Startpunkt der Zeichnung des Bildes und ganz links auf der Leinwand
* @param {Number} y Der Abstand zwischen dem Startpunkt der Zeichnung des Bildes und der Oberseite der Leinwand
* @param {Number} width Die Breite des endgültigen auf der Leinwand gezeichneten Bildes
* @param {Number} height Die Höhe des endgültigen auf der Leinwand gezeichneten Bildes
*/
context.drawImage(image, x, y, width, height)
demo_01 lautet wie folgt:
function $(id) { return document.getElementById(id); }
function getImage(url, callback){
var img = document.createElement('img') ;
img.onload = function( ){
callback && callback(this);
img.src = url;
}
function drawImage(){
var url = 'xiangjishi.png';
var canvas = $('draw_image_canvas');
var context = canvas.getContext('2d');
getImage(url, function(img ){
canvas.width = img.width;
canvas.height = img.height;
var offsetX = 20;
var offsetY = 20;
var drawWidth = img.width/ 4;
var drawHeight = img.height/4;
context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
}
drawImage();
Demo-Anweisungen: Laden Sie xiangjishi.png. Beginnen Sie mit der Koordinate (0, 0) relativ zur oberen linken Ecke der Leinwand , und zeichnen Sie xiangjishi.png auf die Leinwand. Der Effekt ist wie folgt:
Wenn Sie dies sehen, haben Sie möglicherweise kein klares Verständnis für die Bedeutung der vier Parameter in context.drawImage(image, x , y, width, height). Der Code lautet wie folgt:
var offsetX = 20;
var drawWidth = img.width/2;
var drawHeight = img.height/2 ;
context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
Code kopieren
Der Code lautet wie folgt:
context.drawImage(image, x, y, width, height)
2. Canvas-Bilddaten abrufen/einstellen
Der Code lautet wie folgt:
/**
* @description Ruft die Pixelinformationen eines bestimmten Bereichs der Leinwand ab
* @param {Number} x Der Abstand zwischen dem Startpunkt des Abrufens der Informationen und der äußersten linken Seite der Leinwand * @param {Number} y Der Startpunkt zum Abrufen der Informationen Der Startabstand vom oberen Rand der Leinwand
* @param {Number} width Die erhaltene Breite
* @param {Number} height Die endgültige HöheimageData.data: ein eindimensionales Array, das den RGBA-Wert jedes von der Leinwand erhaltenen Pixels speichert. Dieses Array enthält vier Werte für jedes Pixel – Rot, Grün, Blau und Alpha. Jeder Wert liegt zwischen 0 und 255. Daher wird jedes Pixel auf der Leinwand zu vier ganzzahligen Werten in diesem Array. Arrays werden von links nach rechts und von oben nach unten gefüllt.
Code kopieren
Der Code lautet wie folgt:
/**
* @description Verwenden Sie bestimmte imageData, um die Pixelinformationen eines bestimmten Bereichs der Leinwand festzulegen
* @param {Number} x Vom x-Punkt der Leinwand aus festlegen
* @param {Number} y Vom y-Punkt der Leinwand. Einstellung beginnen bei
* @param {Number} width Breite abrufen
* @param {Number} height Endgültige Höhe
*/
context.putImageData(imageData, x, y)
Im Folgenden wird demo_2 verwendet, um die Verwendung von getImageData() und zu erklären Parameter von jedem Die entsprechende Bedeutung
DEMO_02 Quellcode ist wie folgt, leicht modifiziert basierend auf demo_01:
="Hintergrund :#ccc;">
function getAndSetImageData(){
var url = 'xiangjishi.png';
getImage(url, function(img){
$(' draw_image_canvas').width = img.width;
$('draw_image_canvas').height = img.height;
var context = $('draw_image_canvas').getContext('2d'); .drawImage(img, 0 , 0, img.width, img.height);
//Pixelinformationen abrufen
var offsetX = img.width/2;
var offsetY = img.height/2;
var getImgWidth = img.width/2;
var getImgHeight = img.height/2;
var imageData = context.getImageData(offsetX, offsetY, getImgWidth, getImgHeight); Informationen, ignorieren Sie sie hier. Für den spezifischen Code wissen Sie, dass Sie die oben erhaltenen Pixelinformationen intakt in eine andere Leinwand einfügen können
var startX = 0
var startY = 0; get_image_canvas') .getContext('2d');
$('get_image_canvas').width = img.width; imageData, startX , startY);
});
demo_2 Der Anzeigeeffekt ist wie folgt
:
An dieser Stelle können Sie grundsätzlich die Bedeutung der vier Parameter der getImageData-Methode klären. Es ist nicht schwer, die putImageData-Parameter zu verstehen. Sie können den Effekt sehen, nachdem Sie den Code von demo_2 leicht geändert haben
Kopieren Sie den Code
Der Code lautet wie folgt:
var context = $('draw_image_canvas').getContext('2d'); >context.drawImage( img, 0, 0, img.width, img.height); Pixelinformationen abrufen
var offsetX = img.width/2; 2;
var getImgWidth = img.width/2;
var getImgHeight = img.height/2;
var imgageData = context.getImageData(offsetX, offsetY, getImgHeight); Pixelinformationen festlegen
var startX = img.width/2; //Dies war ursprünglich 0
var startY = img.width/2; //Dies war ursprünglich 0
var ct = $('get_image_canvas' ).getContext(' 2d');
$('get_image_canvas').width = img.width;
$('get_image_canvas').height = img.height; startX, startY);
});
Der Demo_3-Anzeigeeffekt ist wie folgt, aber versuchen Sie, einige Parameter selbst zu ändern, dann erhalten Sie möglicherweise ein besseres Verständnis:
3. Canvas-Bilddaten erstellen
Code kopieren
Der Code lautet wie folgt: 
/*** @description Erstellen Sie im Voraus einen Satz Bilddaten und binden Sie ihn an das Canvas-Objekt
* @param {Number} width Die erstellte Breite
* @param {Number} height Die erstellte Höhe
In „HTML5 Advanced Programming“ und vielen Artikeln wird imageData.data als Array behandelt, aber tatsächlich:
Code kopieren
Der Code lautet wie folgt:
imageData.data gibt kein echtes Array, sondern ein Array-ähnliches Objekt zurück. Der Typ von imageData.data kann ausgedruckt werden .prototype .toString.call(imgageData.data)); //Ausgabe: [object Uint8ClampedArray]
Dann drucken Sie den spezifischen Inhalt von imageData.data aus. Der Inhalt ist lang und nur die Vorderseite Letzte werden abgefangen. Aus dem obigen Abschnitt können wir sehen:
imageData.data ist tatsächlich ein Objekt, und sein Index beginnt bei 0 und geht zu width*height*4-1.
Warum nicht direkt in einem Array speichern? Da die Länge des Arrays eine Obergrenze hat, vorausgesetzt, es handelt sich um limitLength, werden Elemente, die limitLength überschreiten, in Form von Schlüsselwerten gespeichert, z. B. data[limitLength 100] ist eigentlich data['limitLength 100 ''] (ich kann nicht Denken Sie an den spezifischen Wert von limitLength, den es gibt Interessierte Kinder können es sich ansehen)
Die Attribute byteLength, byteOffset und buffer am Ende wurden nicht im Detail untersucht und werden hier nicht erweitert, um irreführende Leser zu verhindern .
5. Schreiben Sie es auf die Rückseite Das Niveau ist begrenzt. Bitte weisen Sie darauf hin
