Simpan kandungan HTML5 Canvas sebagai imej menggunakan kemahiran tutorial toDataURL_html5

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
}

Simpan Imej
Muat turun Imej ;
< ;/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