Cara meletakkan gambar dalam Kanvas HTML5 dan menyimpannya sebagai petua tutorial pictures_html5

Gunakan JavaScript untuk menyalin imej ke dalam kanvas

Untuk meletakkan imej ke dalam kanvas, kami menggunakan kaedah drawImage bagi elemen kanvas:

Salin kod

Kod Seperti berikut:

// Menukar imej kepada kanvas; mengembalikan elemen kanvas baharu
fungsi convertImageToCanvas(imej) {
var canvas = document.createElement("kanvas");
canvas.width = imej.width;
canvas.height = imej.height;
canvas.getContext("2d").drawImage(imej, 0, 0);

kembalikan kanvas;
}

Parameter 0, 0 di sini ialah titik koordinat pada kanvas dan imej akan disalin ke tempat ini.

Gunakan JavaScript untuk menyimpan kanvas ke dalam format imej

Jika kerja anda pada kanvas telah siap, anda boleh menggunakan kaedah mudah berikut untuk menukar data kanvas ke dalam format imej:

Salin kod

Kodnya adalah seperti berikut:

// Menukarkan kanvas kepada imej
fungsi convertCanvasToImage(kanvas) {
imej var = Imej baharu();
image.src = canvas.toDataURL("image/png");
kembalikan imej;
}

Kod ini boleh menukar kanvas kepada format PNG secara ajaib!

Teknik untuk menukar antara imej dan kanvas ini mungkin lebih mudah daripada yang anda fikirkan.