Introduction à l'interface pour l'utilisation du traitement du pixel en toile HTML5

Résumé du contenu: Cet article montre l'interface commune du canevas dans l'opération de données de pixels d'image à travers des exemples de code simples et des démos d'images légèrement obscènes. Quant à la façon d'utiliser ces interfaces pour obtenir des effets plus complexes, il continuera d'être discuté dans les chapitres suivants.

1. Remplissage de l'image en toile; 2. Définir / obtenir des données d'image Canvas; 3. Créer des données d'image en toile; 4. Un petit complément à iMagedata.data; 5. Écrivez-le plus tard

/ **

* @description

* @param {numéro} x la distance entre le point le plus à gauche de l'image, le point de dessin de démarrage de Canvas

* @param {numéro} y la distance entre le point de départ du dessin de l'image en haut de la toile

* @param {nombre} Largeur La largeur de l'image finale dessinée sur toile

* @param {numéro} Hauteur La hauteur de l'image finale dessinée sur toile

* /

context.Drawimage (image, x, y, largeur, hauteur)

Demo_01 est le suivant:

<canvas id = draw_image_canvas style = background: #ccc;> </ canvas>

fonction $ (id) {return document.getElementById (id); }

fonction getImage (url, rappel) {

var img = document.CreateElement ('img');

img.onload = function () {

rappel && callback (this);

};

img.src = url;

Document.Body.ApendChild (IMG);

}

fonction drawimage () {

var url = 'xiangjishi.png';

var canvas = $ ('draw_image_canvas');

var context = canvas.getContext ('2d');

getImage (url, fonction (img) {

canvas.width = img.width;

canvas.height = img.height;

var offsetx = 20;

var offsey = 20;

var drawwidth = img.width / 4;

var drawheight = img.height / 4;

context.DrawImage (IMG, Offsetx, Offsey, DrawWidth, Drawheight);

});

}

drawImage ();

Demo Description: Chargez xiangjishi.png. Après le chargement, dessinez Xiangjishi.png sur la toile à partir des coordonnées (0, 0) par rapport au coin supérieur gauche de la toile. L'effet est le suivant:

Voyant cela, vous ne comprenez peut-être pas la signification des quatre paramètres dans Context.Drawimage (image, x, y, largeur, hauteur). Vous pouvez simplement modifier quelques paramètres pour voir l'effet:

var offsetx = 20;

var offsey = 20;

var drawwidth = img.width / 2;

var drawheight = img.height / 2;

context.DrawImage (IMG, Offsetx, Offsey, DrawWidth, Drawheight);

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

context.Drawimage (image, x, y, largeur, hauteur)

/ **

* @Description obtenir des informations sur les pixels pour un domaine spécifique de toile

* @param {numéro} x la distance entre le point le plus à gauche des informations pour obtenir la distance de la toile

* @param {numéro} y la distance de départ du haut de la toile pour obtenir des informations

* @param {nombre} Largeur La largeur obtenue

* @param {nombre} hauteur la hauteur finale

* /

context.getimagedata (x, y, largeur, hauteur)

Cette méthode renvoie un objet imagedata, qui a trois propriétés principales:

iMagedata.width: combien d'éléments y a-t-il par ligne

iMagedata.height: combien d'éléments y a-t-il par colonne

IMAGEDATA.DATA: tableau unidimensionnel qui stocke la valeur RGBA de chaque pixel obtenu à partir de toile. Ce tableau enregistre quatre valeurs pour chaque transparence pixel - rouge, vert, bleu et alpha. Chaque valeur est comprise entre 0 et 255. Par conséquent, chaque pixel sur le toile devient quatre valeurs entières dans ce tableau. L'ordre de remplissage du tableau est de gauche à droite, de haut en bas.

/ **

* @Description Définissez les informations sur les pixels d'une zone spécifique avec un imagedata spécifique

* @param {numéro} x Démarrer le réglage à partir du point x de toile

* @param {nombre} y Démarrez le réglage à partir du point Y de la toile

* @param {nombre} Largeur La largeur obtenue

* @param {nombre} hauteur la hauteur finale

* /

context.putImagedata (iMagedata, x, y)

Ce qui suit consiste à combiner Demo_2 pour expliquer l'utilisation de getImagedata () et la signification correspondante de chaque paramètre

Le code source de Demo_02 est le suivant, et il est légèrement modifié sur la base de Demo_01:

<canvas id = "draw_image_canvas" style = "background: #cc;"> </ canvas>

<canvas id = "get_image_canvas" style = "background: #cc;"> </ canvas>

function getAndSetImagedata () {

var url = 'xiangjishi.png';

getImage (url, fonction (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;

var offsety = img.height / 2;

var getImgWidth = img.width / 2;

var getimgheight = img.height / 2;

var imgagedata = context.getImagedata (offsetx, offsey, getImgWidth, getImgheight);

// Définissez les informations sur les pixels, ignorez d'abord le code spécifique ici, sachez que les informations de pixel obtenues ci-dessus sont placées dans une autre toile intacte

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;

ct.putImagedata (imgagedata, startx, starty);

});

}

À ce stade, la signification correspondant aux quatre paramètres de la méthode getImagedata peut être essentiellement effacée. Il n'est pas difficile de comprendre les paramètres puttimagedata. Après avoir légèrement modifié le code de Demo_2, vous le saurez après avoir examiné l'effet.

function getAndSetImagedata () {

var url = 'xiangjishi.png';

getImage (url, fonction (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;

var offsety = img.height / 2;

var getImgWidth = img.width / 2;

var getimgheight = img.height / 2;

var imgagedata = context.getImagedata (offsetx, offsey, getImgWidth, getImgheight);

// Définir les informations de 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 = img.height;

ct.putImagedata (imgagedata, startx, starty);

});

}

L'effet d'affichage Demo_3 est le suivant, mais si vous essayez de modifier vous-même quelques paramètres, vous pouvez avoir une meilleure compréhension:

/ **

* @Description pré-créez un ensemble de données d'image et liez-la à l'objet Canvas

* @param {nombre} Largeur créée par la largeur

* @param {nombre} hauteur de hauteur

* /

context.CreateImagedata (largeur, hauteur)

L'interface est relativement simple et les données créées peuvent être traitées de la même manière que les données obtenues avec GetImagedata. Il suffit de noter ici que cet ensemble de données d'image ne reflète pas nécessairement l'état actuel de la toile.

De plus, dans "HTML5 Advanced Programming" et de nombreux articles, Imagedata.data est considéré comme un tableau, mais en fait:

IMAGEDATA.DATA Renvoie pas un vrai tableau, mais un objet de classe de classe, qui peut imprimer le type d'imagedata.data.

console.log (object.prototype.tostring.call (imgagedata.data)); // sortie: [objet uint8clampedArray]

Imprimez ensuite le contenu spécifique de Imagedata.Data. Le contenu est long. Seuls les premier et derniers paragraphes peuvent être vus:

Imagedata.data est en fait un objet dont l'index commence à 0 et se termine à la largeur * Hauteur * 4-1.

Pourquoi ne pas le stocker directement en tableaux? Étant donné que la longueur du tableau a une limite supérieure, en supposant qu'elle est limite, les éléments qui dépassent la longueur limite sont stockés en valeurs clés. Par exemple, les données [limitLength + 100] sont en fait des données ['LimitLength + 100 +' '] (Je ne me souviens pas de la valeur spécifique de LimitLength, si vous êtes intéressé, vous pouvez le vérifier)

Quant aux propriétés de la longueur d'yte, de l'octeoffset et du tampon à la fin, nous n'avons pas étudié en profondeur, et nous ne l'élargirons pas ici pour empêcher les lecteurs trompeurs.

Niveau limité, veuillez souligner s'il y a des erreurs