Introduction aux compétences du didacticiel interface_html5 de traitement des pixels HTML5 Canvas

Résumé du contenu : Cet article présente les interfaces courantes de Canvas dans les opérations sur les données de pixels d'image à travers des exemples de code simples et une démo d'image légèrement misérable. Quant à la manière d’utiliser ces interfaces pour obtenir des effets plus complexes, nous continuerons à les décrire dans les chapitres suivants.
1. Remplissage de l'image du canevas ; 2. Définir/obtenir les données de l'image du canevas ; 3. Créer des données d'image du canevas ; 4. Quelques ajouts sur imageData.data ; image Remplissez

Copier le code Le code est le suivant :

/**

* @description
* @param {Number} x La distance entre le point de dessin de départ de l'image et l'extrême gauche de la toile
* @param {Number} y La distance entre le point de dessin de départ de l'image et du haut de la toile
* @param {Number} width La largeur de l'image finale dessinée sur la toile
* @param {Number} height La hauteur de l'image finale dessinée sur la toile
*/
context.drawImage(image, x, y, width, height)


demo_01 est le suivant :

Copier le codeLe code est le suivant :

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();


Instructions de démonstration : Chargez xiangjishi.png Une fois le chargement terminé, commencez à partir de la coordonnée (0, 0) par rapport au coin supérieur gauche du canevas. , et dessinez xiangjishi.png sur la toile. L'effet est le suivant :


En voyant cela, vous n'avez peut-être pas une compréhension claire de la signification des quatre paramètres dans context.drawImage(image, x. , y, width, height). Vous pouvez simplement modifier quelques paramètres pour voir l'effet :

Copier le code

Le le code est le suivant :

var offsetX = 20; var offsetY = 20; var drawWidth = img.width/2

var drawHeight = img.height/2; ;

context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);

L'effet de démonstration modifié est le suivant, combiné à la description de l'API ci-dessus, il ne devrait pas être difficile à comprendre. la signification des quatre paramètres

Copier le code

Le code est le suivant :

context.drawImage(image, x, y, width, height)

2. Obtenir/définir les données de l'image du canevas

Copiez le code

Le code est le suivant :

/*** @description Obtenez les informations sur les pixels d'une zone spécifique du canevas* @param {Number} x La distance entre le point de départ d'obtention des informations et l'extrême gauche du canevas

* @param {Number} y Le point de départ de l'obtention de l'information La distance de départ depuis le haut de la toile

* @param {Number} width La largeur obtenue

* @param {Number} height La hauteur finale
*/
contexte .getImageData(x, y, width, height)


Cette méthode renvoie un objet ImageData, qui a principalement trois attributs :
imageData.width : combien d'éléments y a-t-il dans chaque ligne
imageData.height : combien d'éléments y a-t-il dans chaque colonne
imageData.data : un tableau unidimensionnel qui stocke la valeur RGBA de chaque pixel obtenu à partir du canevas. Ce tableau contient quatre valeurs pour chaque pixel : rouge, vert, bleu et alpha. Chaque valeur est comprise entre 0 et 255. Par conséquent, chaque pixel du canevas devient quatre valeurs entières dans ce tableau. Les tableaux sont remplis de gauche à droite et de haut en bas.

Copier le code

Le code est le suivant :

/**
* @description Utilisez des imageData spécifiques pour définir les informations de pixels d'une zone spécifique du canevas
* @param {Number} x Définir à partir du point x du canevas
* @param {Number} y À partir du point y du canevas Commencez le réglage à
* @param {Number} width Obtenez la largeur
* @param {Number} height Hauteur finale
*/
context.putImageData(imageData, x, y)

Ce qui suit utilise demo_2 pour expliquer l'utilisation de getImageData() et le paramètres de chacun La signification correspondante
Le code source DEMO_02 est le suivant, légèrement modifié en fonction de demo_01 :

Copier le code

Code comme suit :

Copier le code

Le code est le suivant :

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);
//Obtenir des informations sur les pixels
var offsetX = img.width/2;
var getImgWidth = img.width/2;
var getImgHeight = img.height/2;
var imgageData = context.getImageData(offsetX, offsetY, getImgWidth, getImgHeight
//Set pixel); informations, ignorez-les ici Pour le code spécifique, vous savez que vous pouvez mettre les informations de pixels obtenues ci-dessus intactes dans un autre canevas
var startX = 0;
var startY = 0;
var ct = $(' get_image_canvas') .getContext('2d');
$('get_image_canvas').width = img.width;
$('get_image_canvas').height = img.height; imgageData, startX , startY);
});
}



demo_2 L'effet d'affichage est le suivant

 :

À ce stade, vous pouvez essentiellement effacer la signification des quatre paramètres de la méthode getImageData. Il n'est pas difficile de comprendre les paramètres putImageData. Vous pouvez voir l'effet après avoir légèrement modifié le code de demo_2

Copiez le code

<.> Le code est le suivant : 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'); >context.drawImage( img, 0, 0, img.width, img.height);
//Obtenir des informations sur les pixels
var offsetX = img.width/2; 2;
var getImgWidth = img.width/2;
var getImgHeight = img.height/2;
var imgageData = context.getImageData(offsetX, offsetY, getImgWidth, getImgHeight); Définir les informations sur les pixels
var startX = img.width/2; //C'était à l'origine 0
var startY = img.width/2; //C'était à l'origine 0
var ct = $('get_image_canvas' ).getContext(' 2d');
$('get_image_canvas').width = img.width;
$('get_image_canvas').height =
ct.putImageData(imgageData, startX, startY);
});
}


L'effet d'affichage demo_3 est le suivant, mais essayez de modifier quelques paramètres vous-même et vous aurez peut-être une meilleure compréhension :

3. Créer des données d'image de toile

Copier le code

Le code est le suivant :

/*** @description Créez un ensemble de données d'image à l'avance et liez-le à l'objet canevas * @param {Number} width La largeur créée * @param {Number} height La hauteur créée

*/

context.createImageData(width, height)

L'interface est relativement simple, et les données créées peuvent être créées comme Les données obtenues par getImageData sont traitées de la même manière. La seule chose à noter ici est que cet ensemble de données d'image ne reflète pas nécessairement l'état actuel du canevas.

4. Quelques points supplémentaires sur imageData

Dans "HTML5 Advanced Programming" et de nombreux articles, imageData.data est traité comme un tableau, mais en fait :

Copier le code


Le code est le suivant :

imageData.data ne renvoie pas un vrai tableau, mais un objet de type tableau. Le type de imageData.data peut être imprimé
console.log(Object. .prototype .toString.call(imgageData.data)); //Sortie : [object Uint8ClampedArray]

Imprimez ensuite le contenu spécifique de imageData.data. Le contenu est long et uniquement le recto et. last sont interceptés Dans la section ci-dessus, nous pouvons voir :
imageData.data est en fait un objet, et son index commence à 0 et va à width*height*4-1.

Pourquoi ne pas le stocker directement dans un tableau ? Étant donné que la longueur du tableau a une limite supérieure, en supposant qu'elle soit limitLength, les éléments dépassant limitLength sont stockés sous forme de valeurs clés, telles que data[limitLength 100] est en fait data['limitLength 100 ''] (je ne peux pas rappelez-vous la valeur spécifique de limitLength, il y a des enfants intéressés qui peuvent la vérifier) ​​
Quant aux attributs byteLength, byteOffset et buffer à la fin, ils n'ont pas été étudiés en détail et ne seront pas développés ici pour éviter d'induire les lecteurs en erreur .
5. Écrivez-le au dos
Le niveau est limité. S'il y a des erreurs, veuillez les signaler

.