Canvas转换PNG，前端JS代码
<html>
<button id="save" style="width: 200px;height: 200px;">保存</button>
<div id="canvas"></div>
</html>
<script>
var canvas;//定义canvas变量
window.onload = function () {
canvas = $("#map").find("canvas")[0]; //找到页面中需要导出成PNG图片的Canvas的DOM对象
}
document.getElementById("save").onclick = function () {
downLoad(saveAsPNG(canvas));
}
//将canvas转换为PNG
function saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
}
/**
* @author WL
* @param {String} url 需要下载的文件地址
* */
function downLoad(url) {
var oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
</script>
