Comentario: La idea principal de guardar el contenido de lienzo HTML5 como imagen es usar la propia API de Canvas - Todataurl () para implementarlo. La implementación específica es la siguiente. Los amigos interesados pueden referirse a él. Espero que te sea útil.
La idea principal es usar la propia API de Canvas - Todataurl () para implementar toda la implementaciónEl código de HTML + JavaScript es simple.
<html>
<meta http-oquiv = "x-ua-compatible" content = "Chrome = 1">
<Evista>
<script>
window.onload = function () {
dibujar();
var saveButton = document.getElementById ("saveImageBtn");
BindButToneVent (SaveButton, "Haga clic", SaveImageInfo);
var dlButton = document.getElementById ("downloadImageBtn");
bindButToneVent (dlButton, "hacer clic", saveAsLocalImage);
};
function draw () {
var lienvas = 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)"; // color negro
ctx.fillText ("Gloomyfish - demostración", 50, 50);
}
función bindButToneVent (Elemento, Tipo, Handler)
{
if (element.addeventListener) {
elemento.addeventListener (tipo, controlador, falso);
} demás {
element.attachevent ('on'+type, manejador);
}
}
función saveImageInfo ()
{
var mycanvas = document.getElementById ("thecanvas");
var imagen = mycanvas.todataurl ("imagen/png");
var w = window.open ('Acerca de: en blanco', 'Imagen de Canvas');
w.document.write ("<img src = '"+imagen+"' />