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

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

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

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

1. HTML页面的代码
保存图片

2. js代码

首先是给保存图片的这个元素绑定一个未来事件，在事件中使用了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图片