将HTML5 Canvas的内容保存为图片主要思想是替换Canvas自己的API-toDataURL（）来实现，具体实现如下，感兴趣的朋友可以参考下哈，希望对你有所帮助
主要思想是可行的Canvas自己的API-toDataURL（）来实现，整个实现
HTML + JavaScript的代码很简单。
复制代码
代码如下：
<html>
<meta http-equiv =“ X-UA-Compatible” content =“ chrome = 1”>
<head>
<script>
window.onload = function（）{
draw（）;
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，
ctx.fillStyle =“ rgba（0，0，0，1）”; //黑色
ctx.fillText（“ Gloomyfish-Demo”，50，50）;
}
函数bindButtonEvent（element，type，handler）
{
if（element.addEventListener）{
element.addEventListener（type，handler，false）;
} else {
element.attachEvent（'on'+ type，handler）;
}
}
函数saveImageInfo（）
{
var mycanvas = document.getElementById（“ thecanvas”）;
var image = mycanvas.toDataURL（“ image / png”）;
var w = window.open（'about：blank'，'canvas from canvas'）;
w.document.write（“ <img src ='” + image +“'alt ='from canvas'/>”）;
var myCanvas = document.getElementById（“ thecanvas”）;
//这是最重要的部分，因为如果不进行替换，则会出现DOM 18异常。
// var image = myCanvas.toDataURL（“ image / png”）。replace（“ image / png”，“ image / octet-stream; Content-Disposition：附件; filename = foobar.png”）;
var image = myCanvas.toDataURL（“ image / png”）。replace（“ image / png”，“ image / octet-stream”）;
window.location.href =图片; // //将保存在本地
}
</ script>
</ head>
<body bgcolor =“＃E6E6FA”>
<div>
<canvas width = 200 height = 200 id =“ thecanvas”> </ canvas>
<button id =“ saveImageBtn“>保存图像</ button>
</ html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML