Kommentar: Die Hauptidee zum Speichern von HTML5 -Canvas -Inhalten als Bild besteht darin, die eigene API von Canvas zu verwenden - todataurl (), um es zu implementieren. Die spezifische Implementierung ist wie folgt. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Die Hauptidee besteht darin, die eigene API von Canvas zu verwenden - todataurl (), um die gesamte Implementierung zu implementierenDer Code von HTML + JavaScript ist einfach.
<html>
<meta http-äquiv = "x-ua-kompatible" content = "Chrome = 1">
<kopf>
<Script>
window.onload = function () {
ziehen();
var SaveButton = document.getElementById ("SaveImageBtn");
BindButtOneEvent (SaveButton, "Click", SaveImageInfo);
var dlbutton = document.getElementById ("DownloadImageBtn");
BindButtOneEvent (dlbutton, "click", Saveaslocalimage);
};
Funktion 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)"; // schwarze Farbe
ctx.filltext ("Düsterfisch - Demo", 50, 50);
}
Funktion BindButtoneEvent (Element, Typ, Handler)
{
if (element.addeventListener) {
Element.AdDeVentListener (Typ, Handler, Falsch);
} anders {
Element.attacheAvent ('on'+Typ, Handler);
}
}
Funktion SaveImageInfo ()
{
var mycanvas = document.getElementById ("thecanvas");
var image = mycanvas.todataurl ("Bild/png");
var w = window.open ('um: leer', 'Bild aus Leinwand');
W.Document.write ("<img src = '"+image+"' />