Exemplu
Crearea unui obiect ImageData 100 * 100 pixeli în cazul în care fiecare pixel este de culoare roșie, și a pus-o pe pânză:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| createImageData() | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
createImageData() metoda creează un obiect nou, ImageData gol. Valorile pixelilor Noul obiect sunt transparente negru în mod implicit.
Pentru fiecare pixel într-un obiect ImageData există patru bucăți de informații, valorile RGBA:
R - Culoarea roșie (from 0-255)
G - Culoarea verde (from 0-255) de (from 0-255)
B - Culoarea albastră (from 0-255) de (from 0-255)
A - Canalul alfa (from 0-255; 0 is transparent and 255 is fully visible) de (from 0-255; 0 is transparent and 255 is fully visible)
Deci, transparent negru indică: (0,0,0,0) .
Informația de culoare / alfa are loc într-o matrice, iar din matrice conține 4 bucăți de informații pentru fiecare pixel, dimensiunea matricei este de 4 ori mai mare decât dimensiunea obiectului ImageData: latime * inaltime * 4. (O modalitate mai ușoară de a găsi dimensiunea de matrice, este de a utiliza ImageDataObject.data.length)
Matricea care conține informația de culoare / alfa este stocat în datele proprietatea obiectului ImageData.
Tip: După ce ați manipulat informația de culoare / alfa în matrice, puteți copia datele imaginii înapoi pe panza cu putImageData() metoda.
Examples:
Sintaxa pentru a face primul pixel în ImageData obiecta roșu:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;Sintaxa pentru a face al doilea pixel în verde obiect ImageData:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;JavaScript Sintaxa
Există două versiuni ale createImageData() metoda:
1. Acest lucru creează un nou obiect ImageData cu dimensiunile specificate (în pixeli):
| sintaxa JavaScript: | var imgData = context . createImageData( width,height ) ; |
|---|
2. Acest lucru creează un nou obiect ImageData cu aceleași dimensiuni ca și obiectul specificat de anotherImageData (this does not copy the image data) de (this does not copy the image data) :
| sintaxa JavaScript: | var imgData = context . createImageData( imageData ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere |
|---|---|
| width | Lățimea noului obiect ImageData, în pixeli |
| height | Înălțimea noului obiect ImageData, în pixeli |
| imageData | obiect anotherImageData |
<Canvas obiect