html2canvas插件對整個網頁或者網頁某一部分截圖並保存為圖片

html2canvas能夠實現在用戶瀏覽器端直接對整個或部分頁面進行截屏。這個腳本將當前頁面渲染成一個canvas圖片，通過讀取DOM並將不同的樣式應用到這些元素上實現。它不需要來自服務器任何渲染，整張圖片都是在客戶端瀏覽器創建。當瀏覽器不支持Canvas時，將采用Flashcanvas或ExplorerCanvas技術代替實現。以下瀏覽器能夠很好的支持該腳本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的瀏覽器。

 

如果你想將網頁的某一部分或者全部進行截圖從而來生成圖片保存，那么html2canvas將會是一個很好的選擇！

 

以下是html2canvas的使用教程：

1.使用jquery插件html2canvas對網頁的某一部分截圖（根據元素節點，比如id什么的）。

2.將截圖到的canvas標簽通過toDataURL()方法轉成可以傳輸的base64編碼post給后台服務器處理。

3.在后台服務器對傳遞過來的base64編碼處理得到圖像並保存。

代碼：

1.引用jquery插件

<script src="/js/html2canvas.js" type="text/javascript"></script>

2.截圖通過ajax傳輸

<script type="text/javascript">
　　　　function howuse(){
　　　　　　html2canvas(document.getElementById('email_content'), {
 　　　　　　　　onrendered: function(canvas){

 6             var html_canvas = canvas.toDataURL();
 7             $.post('/report/send_rep_submit', {html_canvas:html_canvas}, function(json){

 8                 }, 'json');
 9             }
10         });
　　　　}
　　</script>

3.后台服務器處理

public function send_rep_submit() {
        $html_canvas = $this->input->post('html_canvas');
        $image = base64_decode(substr($html_canvas, 22));

        header('Content-Type: image/png');
        $filename = "images/report/" . $id . ".png";
        $fp = fopen($filename, 'w');
        fwrite($fp, $image);
        fclose($fp);
    }