html2canvas 网页dom截图上传服务器 image标签图片实时更新

最新推荐文章于 2024-05-23 09:13:51 发布

concealed0

最新推荐文章于 2024-05-23 09:13:51 发布

阅读量1.4k

点赞数 1

文章标签： HTML2canvas 截图上传 image标签实施更新 ajax轮询后台image

本文链接：https://blog.csdn.net/concealed0/article/details/88734894

版权

一、使用场景，逻辑以及效果：

场景：用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;
        }
    }

concealed0

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html2canvas 网页dom截图上传服务器 image标签图片实时更新

一、使用场景，逻辑以及效果：场景：用HTML2canvas 定时截图将截图实时显示在网页上，并将截图上传至服务器，之后在本页面进行定时轮询截图后台逻辑：前台使用HTML2canvas将截图以base64的形式通过jquery的ajax发送给后台，base64格式，即后台获取的截图格式如图（base64很长的字符串）刚开始考虑将base64直接存到mysql数据库，发现很多不建议的，...
复制链接

扫一扫