Commentaire: L'idée principale de sauver le contenu du canevas HTML5 en tant qu'image est d'utiliser la propre API de Canvas - Todataurl () pour l'implémenter. L'implémentation spécifique est la suivante. Les amis intéressés peuvent y faire référence. J'espère que cela vous sera utile.
L'idée principale est d'utiliser la propre API de Canvas - Todataurl () pour implémenter l'intégralité de l'implémentationLe code de HTML + JavaScript est simple.
<html>
<meta http-equiv = "x-ua compatible" content = "chrome = 1">
<adal>
<cript>
window.onload = function () {
dessiner();
var SaveButton = document.getElementById ("SaveImageBtn");
bindButTonEvent (sauvegarde, "cliquez", SaveImageInfo);
var dlbutton = document.getElementById ("téléchargement en téléchargement");
bindButTonEvent (dlbutton, "click", sauveasLocalimage);
};
fonction 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)"; // couleur noire
ctx.fillText ("Smoteur-poisson - démo", 50, 50);
}
fonction bindButtOnevent (élément, type, gestionnaire)
{
if (element.addeventListener) {
element.adDeventListener (type, gestionnaire, false);
} autre {
element.attachevent ('on' + type, gestionnaire);
}
}
fonction SaveImageInfo ()
{
var myCanvas = document.getElementById ("thecanvas");
var image = myCanvas.todataurl ("image / png");
var w = window.open ('À propos: blanc', 'image de canvas');
w.document.write ("<img src = '" + image + "' />