html2canvas网页截图之后图片的保存方法

本文预设前提如下：

1. 使用html2canvas插件进行网页截图，已经获取到了canvas对象数据

$(function(){
     html2canvas($(".ht0"), {
         useCORS:true,
        logging:true,
     onrendered: function (canvas) {  
         var url = canvas.toDataURL("image/png"); //data:image/png;base64
         //步骤一  
         //步骤二  
         //步骤三     
       }  
    });
});

//imgData是当前网页的canvas对象转换成base64字符串的数据

imgData = imgData.replace('image/png','image/octet-stream'); //data:image/stream;base64

//步骤一

function save_click(obj) {
    var _event = document.createEvent("MouseEvents");
    _event.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
        );
    obj.dispatchEvent(_event);
}

//步骤二

function saveImage(data, filename){
    var _link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    _link.href = data;
    _link.download = filename;
    save_click(_link);
};

//步骤三

// 图片命名格式：1530083790335.png
var filename = (new Date()).getTime() + '.png';
saveImage(imgData,filename);

收工！！！

本文参考一下链接：

1.如何使用js将canvas保存为图片文件，并且可以自定义文件名

2.js文件下载

防丢失截图：

//js文件下载

//闭包写法