Kanvas dan gambar mengonversi kode sampel satu sama lain

Komentar: Artikel ini menunjukkan kepada Anda cara mengonversi gambar ke kanvas, dan cara mengekstrak gambar. Kode sampel adalah sebagai berikut. Teman dengan kebutuhan ini dapat merujuknya. Saya harap ini akan membantu Anda.

Demo Asli: Demo Konversi Gambar JavaScript Canvas

Pada Konferensi Pengembangan Web Mozilla minggu lalu, kami akhirnya menghabiskan sebagian besar hari membahas aplikasi pasar Mozilla di masa depan. Instagram adalah aplikasi seluler paling populer baru-baru ini, dijual ke Facebook dengan harga tinggi $ 1 miliar.

Saya tidak keberatan mendapatkan uang tambahan, jadi saya memutuskan untuk membuat aplikasi bergaya Instagram (akan membagikannya nanti)

Artikel ini menunjukkan kepada Anda cara mengonversi gambar ke kanvas dan cara mengekstrak gambar.

Konversi gambar ke kanvas

Untuk mengonversi gambar ke kanvas (artboard, kanvas), Anda dapat menggunakan metode drawImage dari konteks elemen kanvas:

// Konversi gambar ke objek kanvas

fungsi convertImagetocanvas (gambar) {

// Buat elemen dom kanvas dan atur lebarnya dan tingginya sama dengan gambar

var canvas = document.createElement ("Canvas");

canvas.width = image.width;

canvas.height = image.height;

// Koordinat (0,0) menunjukkan gambar dari sini, yang setara dengan diimbangi.

canvas.getContext ("2d"). DrawImage (gambar, 0, 0);

mengembalikan kanvas;

}

Konversi kanvas menjadi gambar

Dengan asumsi bahwa gambar telah diproses pada kanvas, Anda dapat menggunakan metode berikut untuk mengubah kanvas menjadi objek gambar gambar.

// Ekstrak gambar dari kanvas

Function ConvertCanVastoImage (Canvas) {

// Objek gambar baru dapat dipahami sebagai dom

gambar var = gambar baru ();

// canvas.todataurl Mengembalikan serangkaian URL yang dikodekan base64. Tentu saja, browser itu sendiri harus mendukungnya.

// tentukan format png

image.src = canvas.todataurl ("Image/png");

gambar kembali;

}

Eh! Konversi gambar gambar dan kanvas lebih mudah dari yang Anda pikirkan. Di masa depan, saya akan mendemonstrasikan teknologi pemrosesan gambar yang berbeda kepada Anda. Saya percaya bahwa Anda pasti akan menghasilkan banyak uang dengan teknologi ini di masa depan.