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

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

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

        
        
点击截图
        

            

                
Hello world!
               
        
    

js部分

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;
        }
    }