將網站儲存成圖片

weixin_34120274發表於2016-12-11

使用html2canvas 講網頁元素儲存成圖片

引用檔案

<script src="dist/js/html2canvas.min.js"></script>
<script type="text/javascript" src="http://www.boolaw.com/tpl/default/js/jquery-1.8.3.min.js"></script>

HTML

<a type="button" id="down_button">download</a>

JS

$(function(){     
    print();  
}); 

function print(){     
    html2canvas( $("#o_text") ,{            
        onrendered: function(canvas){  
            $('#down_button').attr('href',canvas.toDataURL());  
            $('#down_button').attr('download', '1.png' ); 
        }  
    });  
} 

最好的情況 將需要列印的元素 脫離文件流。
移動端 如果生成的圖片太大的話會出現問題。

相關文章