php类似html2canvas,使用html2canvas在服务器端生成图片

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

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

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

1. HTML页面的代码

保存图片

2. js代码

$(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)

};

}

})

}

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