一、使用场景,逻辑以及效果:
场景:用HTML2canvas 定时截图将截图实时显示在网页上,并将截图上传至服务器,之后在本页面进行定时轮询截图
后台逻辑:前台使用HTML2canvas将截图以base64的形式通过jquery的ajax发送给后台,base64格式,即后台获取的截图格式如图(base64很长的字符串)
刚开始考虑将base64直接存到mysql数据库,发现很多不建议的,但是还是操作了一下,具体思路是:先看你图片的大小,然后再mysql存储的时候考虑什么类型的字段,比如blod以及text类型,不然会导致数据过大,具体类型请百度。但是在以blod类型存base64需要转义,具体请百度,建议直接以text类型存,简单。
之后发现还是在mysql存地址比较简单。。。
具体思路是,后台获取前台传来的以base64类型的图片,然后通过base64_upload($base64)函数将base64转义为.jpg/.png等图片格式存到服务器,然后这个函数就会返回一个图片的具体名称,之后根据自己定义的路径,将路径存到mysql数据库
MySQL的格式
image_path字段类型比较特殊,为varchar(250);其他字段类型正常
存入数据库后就是在本页面进行图片实时更新。
在前台ajax轮询时,以时间戳的方式进行轮询
具体请看下面代码。
使用效果如图
二、本地配置:
Windows10+TP5.0+nginx1.10+mysql8.0
本文后台为PHP!
三、需要准备的js文件
js文件可以再官网进行下载
四、源码:
jietu.html
<body>
<image id="lexs" src="/uploads/LEjt/hkws/1.jpg" />
<div class="btn">点击截图</div>
<div id="targetDom" class="main">
<div id="capture" style="padding: 10px;width:500px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
</div>
</body>
js部分
<script>
var imgData; //全局变量
//js截图功能
function LEjt(){
console.log("截图---------");
html2canvas(document.querySelector("#capture"),{useCORS:true}).then(canvas => {
imgData=canvas.toDataURL("image/jpeg", 1.0); //图片二进制格式
document.body.appendChild(canvas);//把截的图显示在网页上
});
// console.log(imgData);
$.ajax({
type: "post",
url:"{:url('/hkws/index/lejt')}",
data: {'image' : imgData,device_pid:10001000 },
async: true,
success: function (res) {
if(res==1){
console.log("另存图片成功!");
}else if(res==0){
alert("另存图片失败!");
}else
console.log("imData为空。。。。。。");
},
error: function(e) {
console.log(e); //alert错误信息
}
});
}
//截图轮询
window.setInterval(LEjt,50000);
//显示轮询
window.setInterval(function(){$.ajax({
type: "post",
url:"{:url('/hkws/index/lexs')}",
async: true,
success: function (res) {
console.log("截图轮询中!");
console.log(res);
if (res != 1) {
for (var j = 0; j < res.length; j++) {
switch(res[j].device_pid){
case 10001000:
//图片实时更新地址成功
var leurl=res[j].image_path;
$("#lexs").attr('src', leurl+'?'+Math.random());
//$("#lexs").attr('src', leurl);
console.log("3333333333333");
console.log(leurl);
break;
default :
console.log("获取到其他视频截图");
}
}
}
else
console.log("此时没有截图!");
},
error: function(e) {
alert(e.responseText); //alert错误信息
}
});},60000);
</script>
php后台部分
截图控制器
//截图
public function LEjt()
{
$base64 = input('post.image');
if ($base64 != null) {
$uploads = $this->base64_upload($base64); //这个函数是将base64图片存到服务器,然后返回存储的图片名称
$ledata = date('Y-m-d', time());
$data['image_path'] = "/uploads/LEjt/hkws/{$ledata}/{$uploads}";
$data['device_pid'] = input('post.device_pid');
$data['property'] = '梨园';
$data['timestamp'] = date('Y-m-d H:i:s', time());
$res = Db::connect('database.le')->table('site_image')->insert($data);
if ($res) {
return 1;
} else {
return 0;
}
} else {
return 2;
}
}
//base64编码的图片上传到服务器
public function base64_upload($base64)
{
$base64_image = str_replace(' ', '+', $base64);
//post的数据里面,加号会被替换为空格,需要重新替换回来,如果不是post的数据,则注释掉这一行
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)) {
//匹配成功
if ($result[2] == 'jpeg') {
$image_name = uniqid().'.jpg';
//纯粹是看jpeg不爽才替换的
} else {
$image_name = uniqid().'.'.$result[2];
}
//创建日期文件
$ledata = date('Y-m-d', time());
$dir = iconv('UTF-8', 'GBK', "uploads/LEjt/hkws/{$ledata}");
if (!file_exists($dir)) {
mkdir($dir, 0777, true);
}
// $path="/uploads/LEjt/hkws/{$ledata}"
// mkdir(iconv("UTF-8", "GBK", $path),0777,true);
$image_file = "./uploads/LEjt/hkws/{$ledata}/{$image_name}";
//服务器文件存储路径
if (file_put_contents($image_file, base64_decode(str_replace($result[1], '', $base64_image)))) {
return $image_name;
} else {
return 1;
}
} else {
return 111;
}
}
定时图片更新的接口
//网页实时显示图片
public function LExs()
{
$letime = date('Y-m-d H:i', strtotime('-2 minute'));
$where['timestamp'] = array('like', '%'.$letime.'%');
$res = Db::connect('database.le')->table('site_image')->where($where)->select();
if ($res) {
return json($res);
} else {
return 1;
}
}