Komentar: Gagasan utama menyimpan konten kanvas HTML5 sebagai gambar adalah menggunakan API Canvas sendiri - Todataurl () untuk mengimplementasikannya. Implementasi spesifik adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu Anda.
Gagasan utamanya adalah menggunakan API Canvas sendiri - Todataurl () untuk mengimplementasikan seluruh implementasiKode HTML + JavaScript sederhana.
<Html>
<meta http-equiv = "x-ua-kompatibel" konten = "chrome = 1">
<head>
<script>
window.onload = function () {
menggambar();
var saveButton = document.getElementById ("saveImageBtn");
BindButtonEvent (savebutton, "klik", saveImageInfo);
var dlbutton = document.getElementById ("downloadImageBtn");
BindButtonEvent (dlbutton, "klik", saveaslocalimage);
};
function draw () {
var canvas = document.getElementById ("thecanvas");
var ctx = canvas.getContext ("2d");
ctx.fillstyle = "rgba (125, 46, 138, 0,5)";
ctx.fillrect (25,25.100.100);
ctx.fillstyle = "rgba (0, 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, Handler)
{
if (element.addeventListener) {
element.addeventListener (tipe, pawang, false);
} kalau tidak {
element.attachevent ('on'+type, handler);
}
}
fungsi saveImageInfo ()
{
var myCanvas = document.getElementById ("thecanvas");
var image = myCanvas.todataurl ("Image/png");
var w = window.open ('tentang: blank', 'gambar dari kanvas');
w.document.write ("<img src = '"+gambar+"' />