需求：在項(xiàng)目中需要使用截圖的功能，但是我們一般情況都是采用微信或者是QQ進(jìn)行截圖，而且這種方式不方便，更重要的是，如果要截取的部分超出一屏的話，采用上述方式截圖，只能截取一部分內(nèi)容，而不能將所有的內(nèi)容截取出來，因此，我們迫切的需要一種可以滾動截圖的方式，并且是截取我想要的部分，因此就引出了下面的這種截圖方式--html2canvas。

首先最基本的是：引入這個js文件。

<script src="__JS__/html2canvas.js"></script>

下面是實(shí)現(xiàn)此功能的具體代碼

1. HTML頁面的代碼
<button type="button" class="fc-month-button saveImage">保存圖片</button>

2. js代碼

<script type="text/javascript">
    $(function(){
        $(".saveImage").on('click', function (event) {
            var img={}
            event.preventDefault();
            html2canvas($(".fc-view-container"), {
                allowTaint: true,
                taintTest: false,
                onrendered: function(canvas) {
                    canvas.id = "mycanvas";

                    //生成base64圖片數(shù)據(jù)
                    var dataUrl = canvas.toDataURL();
                    img.img=dataUrl;
                    saveimg(img)
                }
            });
        });
    });

    // 保存圖片
    function saveimg(img){
        $.ajax({
            url:"{:U('Index/saveImg')}",
            type:'post',
            data:img,
            success:function(data){
                if (data.status) {
                    //toast.success(data.info,'溫馨提示');
                    setTimeout(function(){
                        window.location.href="/Uploads/Screen/"+data.url+".png";
                    }, 1000)

                }else{
                    //toast.error(data.info,'溫馨提示');
                    setTimeout(function(){
                        window.location.reload(true);
                    },1200)
                };
            }
        })
    }
</script>

首先是給保存圖片的這個元素綁定一個未來事件，在事件中使用了canvas接口中的toDataURL()方法，我們來解釋一下這個方法的作用：

參考Web Api接口 使用此方法，可以返回一個data: URL,根據(jù)type參數(shù)指定的類型將包含在canvas中的圖片文件編碼成字符串形式, type參數(shù)的默認(rèn)值為image/png.

其次是：html2canvas($(".fc-view-container"))，這個方法用來指定截取并生成圖片的Dom對象。

最后我們是后端的代碼：
3.PHP代碼

    /**
     * 截圖保存圖片
     */
    public function saveImg()
    {
        $pictureFlow=I('img');
        //圖片流轉(zhuǎn)存
        $pictureFlow = str_replace('data:image/png;base64,', '', $pictureFlow);
        $pictureFlow  = base64_decode($pictureFlow);
        $NOW_TIME=NOW_TIME;
        $new_pic_path = 'Uploads/Screen/'.$NOW_TIME.'.png';
        $ret = file_put_contents($new_pic_path, $pictureFlow);
        if ($ret) {
            $this->success('下載成功',$NOW_TIME);
        }else{
            $this->error('下載失敗');
        }
    }

服務(wù)器端的代碼中使用替換操作和base64解碼功能，這樣就可以直接保存前面截取的部分為png格式的圖片。

保存截圖如下：

截取的png圖片