1. 下載并引入 ?html2canvas.js ?
2. 頁面?
<div id="testId"> XXX </div>
3. js 生成并保存圖片
function downPNG(pngName, pngId){
? ? ? ?html2canvas(document.getElementById(pngId), {
? ? ? ? ? ? ? ? onrendered: function(canvas) {
? ? ? ? ? ? ? ? var imgData = canvas.toDataURL('image/octet-stream');
? ? ? ? ? ? ? ? if (canvas.msToBlob) { ? ? // IE 9+瀏覽器
? ? ? ? ? ? ? ? ? ? ? ? var blob = canvas.msToBlob();
? ? ? ? ? ? ? ? ? ? ? ? window.navigator.msSaveBlob(blob, pngName);
? ? ? ? ? ? ? ? ?}else {
? ? ? ? ? ? ? ? ? ? ? ? ?saveFile(imgData,pngName);
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? }
? ? ? ? });
? ?}
var saveFile = 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);
};
4. 傳入頁面id，點擊按鈕下載并保存該區(qū)域為圖片
$(document).on("click",'.btn-save',function(){
downPNG( 'test.png','testId');
});
