コメント：HTML5キャンバスコンテンツを画像として保存する主なアイデアは、Canvas独自のAPI -Todataurl（）を使用して実装することです。特定の実装は次のとおりです。興味のある友達はそれを参照できます。それがあなたに役立つことを願っています。
主なアイデアは、Canvas独自のAPI -todataurl（）を使用して実装全体を実装することですHTML + JavaScriptのコードは簡単です。
<html>
<Meta http-equiv = "x-ua-compatible" content = "chrome = 1">
<head>
<スクリプト>
window.onload = function（）{
描く（）;
var savebutton = document.getElementById（ "SaveImageBtn"）;
bindbuttonevent（savebutton、 "click"、saveimageinfo）;
var dlbutton = document.getElementById（ "downloadimagebtn"）;
bindbuttonevent（dlbutton、 "click"、saveaslocalimage）;
};
関数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）"; //黒色
ctx.filltext（ "gloomyfish -demo"、50、50）;
}
function bindbuttonevent（要素、タイプ、ハンドラー）
{
if（element.addeventlistener）{
Element.AddeventListener（タイプ、ハンドラー、False）;
} それ以外 {
element.attachevent（ 'on'+type、handler）;
}
}
関数saveimageinfo（）
{
var mycanvas = document.getElementById（ "thecanvas"）;
var image = mycanvas.todataurl（ "image/png"）;
var w = window.open（ 'about：blank'、 'キャンバスからの画像'）;
w.document.write（ "<img src = '"+image+"' />