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

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

首先最基本的是&＃xff1a;引入这个js文件。

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

1. HTML页面的代码

保存图片

2. js代码

$(function(){

$(".saveImage").on(&＃39;click&＃39;, function (event) {

var img&＃61;{}

event.preventDefault();

html2canvas($(".fc-view-container"), {

allowTaint: true,

taintTest: false,

onrendered: function(canvas) {

canvas.id &＃61; "mycanvas";

//生成base64图片数据

var dataUrl &＃61; canvas.toDataURL();

img.img&＃61;dataUrl;

saveimg(img)

}

});

});

});

// 保存图片

function saveimg(img){

$.ajax({

url:"{:U(&＃39;Index/saveImg&＃39;)}",

type:&＃39;post&＃39;,

data:img,

success:function(data){

if (data.status) {

//toast.success(data.info,&＃39;温馨提示&＃39;);

setTimeout(function(){

window.location.href&＃61;"/Uploads/Screen/"&＃43;data.url&＃43;".png";

}, 1000)

}else{

//toast.error(data.info,&＃39;温馨提示&＃39;);

setTimeout(function(){

window.location.reload(true);

},1200)

};

}

})

}

首先是给保存图片的这个元素绑定一个未来事件&＃xff0c;在事件中使用了canvas接口中的toDataURL()方法&＃xff0c;我们来解释一下这个方法的作用&＃xff1a;

参考Web Api接口 使用此方法&＃xff0c;可以返回一个data: URL,根据type参数指定的类型将包含在canvas中的图片文件编码成字符串形式, type参数的默认值为image/png.

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

最后我们是后端的代码&＃xff1a;

3.PHP代码

/**

* 截图保存图片

*/

public function saveImg()

{

$pictureFlow&＃61;I(&＃39;img&＃39;);

//图片流转存

$pictureFlow &＃61; str_replace(&＃39;data:image/png;base64,&＃39;, &＃39;&＃39;, $pictureFlow);

$pictureFlow &＃61; base64_decode($pictureFlow);

$NOW_TIME&＃61;NOW_TIME;

$new_pic_path &＃61; &＃39;Uploads/Screen/&＃39;.$NOW_TIME.&＃39;.png&＃39;;

$ret &＃61; file_put_contents($new_pic_path, $pictureFlow);

if ($ret) {

$this->success(&＃39;下载成功&＃39;,$NOW_TIME);

}else{

$this->error(&＃39;下载失败&＃39;);

}

}

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

保存截图如下&＃xff1a;

截取的png图片