php 抓取网页生成图片(PHP代码服务器端的代码中使用替换操作和base64解码功能)

　　php 抓取网页生成图片(PHP代码服务器端的代码中使用替换操作和base64解码功能)

　　需求：项目中需要用到截图功能，但是我们一般都是用微信或者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)

};

}

})

}

　　第一个是给保存图片的元素绑定一个future事件。事件中使用canvas接口中的toDataURL()方法。我们来解释一下这个方法的作用：

　　参考Web Api接口使用该方法返回一个data: URL，将canvas中收录的图片文件按照type参数指定的类型编码成字符串。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 图像