使用html2canvas在服务器端生成图片

需求：在项目中需要使用截图的功能，但是我们一般情况都是采用微信或者是QQ进行截图，而且这种方式不方便，更重要的是，如果要截取的部分超出一屏的话，采用上述方式截图，只能截取一部分内容，而不能将所有的内容截取出来，因此，我们迫切的需要一种可以滚动截图的方式，并且是截取我想要的部分，因此就引出了下面的这种截图方式--html2canvas。

首先最基本的是：引入这个js文件。

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

下面是实现此功能的具体代码

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图片数据
                    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,根据type参数指定的类型将包含在canvas中的图片文件编码成字符串形式, type参数的默认值为image/png.

其次是：html2canvas($(".fc-view-container"))，这个方法用来指定截取并生成图片的Dom对象。

最后我们是后端的代码：
3.PHP代码

    /**
     * 截图保存图片
     */
    public function saveImg()
    {
        $pictureFlow=I('img');
        //图片流转存
        $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('下载失败');
        }
    }

服务器端的代码中使用替换操作和base64解码功能，这样就可以直接保存前面截取的部分为png格式的图片。

保存截图如下：

截取的png图片