Rumah >
Artikel > hujung hadapan web > Simpan kandungan HTML5 Canvas sebagai imej menggunakan kemahiran tutorial toDataURL_html5
Simpan kandungan HTML5 Canvas sebagai imej menggunakan kemahiran tutorial toDataURL_html5
WBOYasal
2016-05-16 15:49:281323semak imbas
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(""); 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 } skrip>
; < ;/body>
Kenyataan:
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