Pengantar antarmuka untuk menggunakan pemrosesan HTML5 Canvas Pixel

Ringkasan Konten: Artikel ini menunjukkan antarmuka umum kanvas dalam operasi data piksel gambar melalui contoh kode sederhana dan demo gambar yang sedikit cabul. Adapun cara menggunakan antarmuka ini untuk mencapai efek yang lebih kompleks, itu akan terus dibahas dalam bab -bab berikutnya.

1. Pengisian gambar kanvas; 2. Mengatur/Dapatkan Data Gambar Kanvas; 3. Buat data gambar Canvas; 4. Sedikit suplemen untuk Imagedata.data; 5. Tulis nanti

/**

* @keterangan

* @param {number} x Jarak dari titik paling kiri titik gambar mulai dari kanvas

* @param {angka} y jarak antara titik awal gambar gambar dari atas kanvas

* @param {number} lebar lebar gambar akhir yang digambar di atas kanvas

* @param {number} ketinggian ketinggian gambar akhir yang digambar di atas kanvas

*/

context.drawimage (gambar, x, y, lebar, tinggi)

Demo_01 adalah sebagai berikut:

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

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

fungsi getImage (url, callback) {

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

img.onload = function () {

callback && callback (ini);

};

img.src = url;

document.body.appendchild (IMG);

}

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

Deskripsi Demo: Muat xiangjishi.png. Setelah memuat, gambar xiangjishi.png pada kanvas mulai dari koordinat (0, 0) relatif ke sudut kiri atas kanvas. Efeknya adalah sebagai berikut:

Melihat ini, Anda mungkin tidak memahami arti dari empat parameter dalam konteks.drawimage (gambar, x, y, lebar, tinggi). Anda cukup memodifikasi beberapa parameter untuk melihat efeknya:

var offsetx = 20;

var offsety = 20;

var drawwidth = img.width/2;

var drawheight = img.height/2;

Context.drawimage (IMG, OffsetX, Offsety, Drawwidth, Drawheight);

Efek demo yang dimodifikasi adalah sebagai berikut. Dikombinasikan dengan deskripsi API di atas, seharusnya tidak sulit untuk memahami arti dari empat parameter.

context.drawimage (gambar, x, y, lebar, tinggi)

/**

* @Description Dapatkan informasi piksel untuk area kanvas tertentu

* @param {number} x Jarak dari titik paling kiri informasi untuk mendapatkan jarak dari kanvas

* @param {number} y Jarak mulai dari atas kanvas untuk informasi

* @param {number} lebar lebar yang diperoleh

* @param {number} tinggi ketinggian akhir

*/

context.getImagedata (x, y, lebar, tinggi)

Metode ini mengembalikan objek Imagedata, yang memiliki tiga properti utama:

Imagedata.width: Berapa banyak elemen yang ada per baris

Imagedata.height: Berapa banyak elemen yang ada per kolom

Imagedata.data: Array satu dimensi yang menyimpan nilai RGBA dari setiap piksel yang diperoleh dari kanvas. Array ini menghemat empat nilai untuk setiap piksel - merah, hijau, biru, dan transparansi alfa. Setiap nilai adalah antara 0 dan 255. Oleh karena itu, setiap piksel pada kanvas menjadi empat nilai integer dalam array ini. Urutan pengisian array berasal dari kiri ke kanan, dari atas ke bawah.

/**

* @Description Atur informasi piksel dari area tertentu dengan imagedata tertentu

* @param {number} x Mulai pengaturan dari titik x kanvas

* @param {number} y Mulai pengaturan dari titik y kanvas

* @param {number} lebar lebar yang diperoleh

* @param {number} tinggi ketinggian akhir

*/

Context.putimageData (Imagedata, x, y)

Berikut ini adalah menggabungkan demo_2 untuk menjelaskan penggunaan getImagedata () dan makna yang sesuai dari setiap parameter

Kode sumber demo_02 adalah sebagai berikut, dan sedikit dimodifikasi berdasarkan demo_01:

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

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

fungsi getAndSetImageData () {

var url = 'xiangjishi.png';

getImage (url, function (img) {

$ ('draw_image_canvas'). width = img.width;

$ ('draw_image_canvas'). tinggi = img.height;

var context = $ ('draw_image_canvas'). getContext ('2d');

context.drawimage (img, 0, 0, img.width, img.height);

// Dapatkan informasi piksel

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, offsety, getimgwidth, getimgheight);

// Atur informasi piksel, abaikan kode spesifik di sini terlebih dahulu, ketahuilah bahwa informasi piksel yang diperoleh di atas ditempatkan di kanvas lain utuh

var startx = 0;

var starty = 0;

var ct = $ ('get_image_canvas'). getContext ('2d');

$ ('get_image_canvas'). width = img.width;

$ ('get_image_canvas'). tinggi = img.height;

CT.PutImagedata (imgagedata, startx, starty);

});

}

Pada titik ini, makna yang sesuai dengan empat parameter dari metode GETIMAGEDATA pada dasarnya dapat dibersihkan. Tidak sulit untuk memahami parameter putimagedata. Setelah sedikit memodifikasi kode demo_2, Anda akan mengetahuinya setelah melihat efeknya.

fungsi getAndSetImageData () {

var url = 'xiangjishi.png';

getImage (url, function (img) {

$ ('draw_image_canvas'). width = img.width;

$ ('draw_image_canvas'). tinggi = img.height;

var context = $ ('draw_image_canvas'). getContext ('2d');

context.drawimage (img, 0, 0, img.width, img.height);

// Dapatkan informasi piksel

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, offsety, getimgwidth, getimgheight);

// Atur informasi piksel

var startx = img.width/2; // Ini awalnya 0

var starty = img.width/2; // Ini awalnya 0

var ct = $ ('get_image_canvas'). getContext ('2d');

$ ('get_image_canvas'). width = img.width;

$ ('get_image_canvas'). tinggi = img.height;

CT.PutImagedata (imgagedata, startx, starty);

});

}

Efek tampilan demo_3 adalah sebagai berikut, tetapi jika Anda mencoba mengubah beberapa parameter sendiri, Anda mungkin memiliki pemahaman yang lebih baik:

/**

* @Description Pra-membuat satu set data gambar dan mengikatnya ke objek Canvas

* @param {number} lebar dibuat berdasarkan lebar

* @param {number} ketinggian dibuat tinggi

*/

Context.createImagedata (lebar, tinggi)

Antarmuka relatif sederhana, dan data yang dibuat dapat diproses sama dengan data yang diperoleh dengan getImagedata. Hanya perlu dicatat di sini bahwa set data gambar ini mungkin tidak selalu mencerminkan keadaan kanvas saat ini.

Selain itu, dalam "HTML5 Advanced Programming" dan banyak artikel, Imagedata.data dianggap sebagai array, tetapi pada kenyataannya:

Imagedata.data mengembalikan bukan array nyata, tetapi objek array kelas, yang dapat mencetak jenis imagedata.data.

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

Kemudian cetak konten spesifik Imagedata.data. Kontennya panjang. Hanya paragraf pertama dan terakhir yang dapat dilihat:

Imagedata.data sebenarnya adalah objek yang indeksnya dimulai dari 0 dan berakhir hingga lebar*tinggi*4-1.

Mengapa tidak menyimpannya langsung di array? Karena panjang array memiliki batas atas, dengan asumsi itu adalah panjang batas, elemen yang melebihi batas panjang disimpan dalam nilai -nilai kunci. Misalnya, data [LimitLength + 100] sebenarnya adalah data ['LimitLength + 100 +' '] (Saya tidak dapat mengingat nilai spesifik LimitLength, jika Anda tertarik, Anda dapat memeriksanya)

Adapun bytelength, byteOffset, dan buffer properti di akhir, kami belum menyelidiki secara mendalam, dan kami tidak akan mengembangkannya di sini untuk mencegah pembaca yang menyesatkan.

Level terbatas, silakan tunjukkan jika ada kesalahan