Contoh kod untuk menukar Kanvas dan Imej kepada satu sama lain_html5 kemahiran tutorial

Tukar Kanvas JS kepada Imej
Demo asal: Demo Penukaran Imej Kanvas JavaScript
Pada Persidangan Pembangunan Web Mozilla minggu lepas, kami menghabiskan sebahagian besar hari membincangkan aplikasi pasaran Mozilla masa hadapan. Instagram, aplikasi mudah alih paling popular sejak kebelakangan ini, telah dijual kepada FaceBook dengan harga $1 bilion.
Saya tidak kisah menjana wang tambahan, jadi saya memutuskan untuk mencipta apl gaya Instagram (akan mengongsinya kemudian)

Artikel ini menunjukkan kepada anda cara menukar Imej kepada kanvas dan cara kanvas mengekstrak gambar .

Tukar Imej kepada Kanvas
Untuk menukar imej kepada Kanvas (papan seni, kanvas), anda boleh menggunakan kaedah drawImage bagi konteks elemen kanvas:

Salin kod

Kod adalah seperti berikut:

// Tukar imej kepada objek kanvas
fungsi convertImageToCanvas(imej ) {
//Buat elemen DOM kanvas dan tetapkan lebar dan tingginya supaya sama dengan imej
var canvas = document.createElement("canvas");
canvas.height = imej .height;
// Koordinat (0,0) bermaksud bermula dari sini, yang bersamaan dengan offset.
canvas.getContext("2d").drawImage(imej, 0, 0);
kembalikan kanvas; telah Selepas memproses pada kanvas, anda boleh menggunakan kaedah berikut untuk menukar kanvas menjadi objek Imej.

Salin kod

Kod adalah seperti berikut:

// Ekstrak imej imej daripada canvas function convertCanvasToImage(canvas) { //Objek Imej Baharu, yang boleh difahami sebagai DOM

imej var = Imej baharu(

// canvas.toDataURL mengembalikan rentetan Base64 yang dikodkan URL, sudah tentu, penyemak imbas itu sendiri mesti menyokong

//Tentukan format PNG
image.src = canvas.toDataURL("image/png");

Nah! Menukar imej kepada kanvas adalah lebih mudah daripada yang anda fikirkan. Saya akan menunjukkan teknik pemprosesan imej yang berbeza kepada anda pada masa hadapan masa hadapan.