想做一個裁剪網頁的部分內容，生成圖片的功能模組；才開始打算的使用PHP實現，結果發現，並不太好實現，當然有可能是我的水平的原因。但最後，在網上查了下，發現居然可以用JS實現，簡直是意外驚喜呀~~！！其主要是通過html2canvas.js實現網頁截圖功能。

具體使用：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

<script type="text/javascript">

(function(){

var wechatWrap = document.getElementsByClassName('wechatWrap')[0];

var creatPrintImg = document.getElementsByClassName('creatPrintImg')[0];



creatPrintImg.onclick = function()
{

    html2canvas(wechatWrap,{

        onrendered : function(canvas){


        var url = canvas.toDataURL();

            var str = 'red_grape'+ Math.ceil(Math.random()*10000);

             //以下程式碼為下載此圖片功能

            var triggerDownload = $("<a>").attr("href", url).attr("download", str+"_hm.png").appendTo("body");

              triggerDownload[0].click();

              triggerDownload.remove();

        }

    });

}



})();

</script>
 

該code主要展示的就是，通過點選按鈕生成對用DOM元素的圖片~~！