Speichern Sie den Inhalt von HTML5 Canvas als Bild mit den toDataURL_html5-Tutorial-Fähigkeiten

Die Hauptidee besteht darin, die Canvas-eigene API toDataURL() zu verwenden, um dies zu erreichen. Die gesamte Implementierung des
HTML-JavaScript-Codes ist sehr einfach.

Code kopieren

Der Code lautet wie folgt:

>< meta http-equiv="X-UA-Compatible" content="chrome=1"> 🎜>draw ();
var saveButton = document.getElementById("saveImageBtn");
bindButtonEvent(saveButton, "click", saveImageInfo);
bindButtonEvent(dlButton, "click", saveAsLocalImage);
function draw(){
var canvas = document.getElementById("thecanvas");
var ctx = canvas. getContext(" 2d");
ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
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("Gloomyfish - Demo", 50, 50);
}
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener (type, handler, false);
element.attachEvent('on' type, handler);
}
function saveImageInfo ()
{
var mycanvas = document.getElementById("thecanvas");
var image = mycanvas.toDataURL("image/png"); Bild von der Leinwand ');
w.document.write(""}
function saveAsLocalImage () {
var myCanvas = document.getElementById("thecanvas");
// hier ist der wichtigste Teil, denn wenn Sie nicht ersetzen, erhalten Sie eine DOM 18-Ausnahme.
// var image = myCanvas.toDataURL ("image /png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
var image = myCanvas.toDataURL("image/ png") .replace("image/png", "image/octet-stream"); ​​​​
window.location.href=image; // es wird lokal gespeichert
}


Bild speichern ;
< ;/body>



Der Operationseffekt ist wie folgt
: