masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Simpan kandungan HTML5 Canvas sebagai imej menggunakan kemahiran tutorial toDataURL_html5

Simpan kandungan HTML5 Canvas sebagai imej menggunakan kemahiran tutorial toDataURL_html5

WBOY
Lepaskan： 2016-05-16 15:49:28
asal
1355 orang telah melayarinya

Idea utama ialah menggunakan API Canvas sendiri - toDataURL() untuk mencapainya Keseluruhan pelaksanaan
Kod JavaScript HTML adalah sangat mudah.

Salin kod
Kodnya adalah seperti berikut:

>< meta http-equiv="X-UA-Compatible" content="chrome=1">

🎜>lukis ();
var saveButton = document.getElementById("saveImageBtn");
bindButtonEvent(dlButton, "klik", saveAsLocalImage);
function draw(){
var canvas = document.getElementById("thecanvas"); getContext(" 2d");
ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
ctx.fillRect(25,25,100,100); , 146, 38, 0.5)";
ctx.fillRect(58, 74, 125, 100);
ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // warna hitam
ctx .fillText("Gloomyfish - Demo", 50, 50);
}
function bindButtonEvent(elemen, jenis, pengendali)
{
if(element.addEventListener) {
element.addEventListener (type, handler, false);
} else {
element.attachEvent('on' type, handler); {
var mycanvas = document.getElementById("thecanvas"); imej daripada kanvas ');
w.document.write("from canvas");
var myCanvas = document.getElementById("thecanvas");
// di sini adalah bahagian yang paling penting kerana jika anda tidak menggantikan anda akan mendapat pengecualian DOM 18
// var image = myCanvas.toDataURL ("imej /png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png"); png") .replace("image/png", "image/octet-stream"); ​​​​
window.location.href=image; // ia akan disimpan secara setempat
}





;
< ;/body>
Label berkaitan：
canvas gambar
sumber：php.cn
Artikel sebelumnya：contoh pekerja html5 (1) Mengapa ujian tidak berfungsi_html5 kemahiran tutorial Artikel seterusnya：Imej Lukisan HTML5 (Bahagian 1): Isu tentang elemen kanvas yang memimpin generasi seterusnya bagi kemahiran tutorial halaman web_html5
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Dapatkan *dua* nilai ketinggian kanvas? Saya cuba mendapatkan dua nilai ketinggian kanvas ini. <canvaswidth="886"heig...
daripada 2024-04-05 09:32:33
0
1
1360
Bagaimana untuk mengeksport jpg daripada berbilang kanvas Saya mempunyai berbilang kanvas yang digunakan sebagai lapisan. canvasc1=backgroundimage.c...
daripada 2024-04-03 21:02:43
0
1
319
Mengapa setiap kali saya menyimpan projek Vite React saya, elemen kanvas baharu ditambahkan pada isi halaman dan bukannya menggantikan elemen kanvas sedia ada? Saya cuba mula belajar ThreeJs (saya juga baru dalam pembangunan web Javascript). Selepas ...
daripada 2024-03-30 09:57:49
0
1
396
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan