在HTML中创建一个canvas存放绘制的图片

<canvas id="cavasimg" width="607" height="367"></canvas>

监听触发保存图片的按钮

function saveImg() {
    var canvas = $('canvas');
    if (canvas.length == 0) {
        return alert('请生成图片后再保存');
    }
    var type = 'png'; //你想要什么图片格式 就选什么吧
    var d = canvas[0];
    var imgdata = d.toDataURL(type);
    //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
    var fixtype = function(type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };
    imgdata = imgdata.replace(fixtype(type), 'image/octet-stream');
    //3.0 将图片保存到本地
    var savaFile = function(data, filename) {
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
    var filename = '' + new Date().getSeconds() + '.' + type;
    //我想用当前秒是可以解决重名的问题了 不行你就换成毫秒
    savaFile(imgdata, filename);
}