有个需求说要把网站上的图表可以保存到本地，查看了一下表单的元素，是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");
}