有个需求说要把网站上的图表可以保存到本地，查看了一下表单的元素，是canvas内的。
用了好多种方法，都失败了。最后搜到了stackoverflow上的一种方法成功导出，代码贴在下面
function exportCanvasAsPNG(id, fileName) {
var canvasElement = document.getElementById(id);
var MIME_TYPE = "image/png";
var imgURL = canvasElement.toDataURL(MIME_TYPE);
var dlLink = document.createElement('a');
dlLink.download = fileName;
dlLink.href = imgURL;
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
原帖：https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf
第一次写js，踩了几个坑，以下注意事项
这种写法是有误的，语法有错，函数内的参数应用单引号括起来，因为双引号内有引号应该使用单引号
<button onclick="exportCanvasAsPNG("pieChart")">保存</button>
正确写法
<button onclick="exportCanvasAsPNG('pieChart','nianling')">保存</button>
再贴几个无效的方法以作参考
第一种方法
var canvas = document.getElementById("pieChart");
var ctx = canvas.getContext('2d');
var btn = document.getElementById('btn1');
btn.onclick() = function() {
var type = 'png';
download(type);
}
function download(type) {
var imgdate = canvas.toDataURL(type);
var fixtype = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image' + r;
}
imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
var saveFile = function (data, filename) {
var link = document.createElement('a');
link.href = data;
link.download = filename;
var event = document.createElement('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
}
var filename = new Date().toLocaleDateString() + '.' + type;
saveFile(imgdate, filename);
}
第二种方法
var canvas = document.getElementById('pieChart');
function download() {
var dom = document.createElement("a");
dom.href = this.canvas.toDataURL("image/png");
dom.download = new Date().getTime() + ".png";
dom.click();
}
第三种方法
var canvas = document.getElementById('pieChart');
function base64Img2Blob(code){
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
function downloadFile(){
var aLink = document.createElement('a');
var blob = base64Img2Blob(canvas.toDataURL("image/png")); //new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
aLink.download = new Date().getTime() + ".png";
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
第四种方法
window.onload = function() {
var canvas = document.getElementById("pieChart");
var context = canvas.getContext("2d");
// no argument defaults to image/png; image/jpeg, etc also work on some
// implementations -- image/png is the only one that must be supported per spec.
window.location = canvas.toDataURL("image/png");
}
