A-A+

javascript 调用本地摄像头拍照 ajax提交上传

2020年06月26日 前端 暂无评论 阅读 20 次
守财鹿邀请码

最近在做一个小应用,里面有一个功能就是需要打开摄像头拍照并且上传,今天就记录一下这个小功能。

HTML篇:

这里我是用的layui的样式,需要先引用layui的样式,才会有上图的效果。

<div class="layui-form-item">
    <label for="image" class="layui-form-label">
        <span class="x-red">* </span>照片:
    </label>
    <div class="layui-upload" style=" width:200px;">
        <div class="layui-upload-list" style=" width:200px;">
            <video  class="" id="video" width="200" height="300"   controls></video>
        </div>
        <a  class="layui-btn" id="capture">点击拍照</a>
    </div>
    <div class="layui-upload" style="margin-left: 20px;width:200px;">
        <input type="hidden" name="image" id="image"  value="" >
        <div class="layui-upload-list" style=" width:200px;">
            <canvas  id="canvas" width="200" height="300"></canvas>
            <p id="upText" class="upText"></p>
        </div>
       <button type="button" class="layui-btn" onclick="is_flag()">点击上传</button>
    </div>
</div>

 

JS篇:

这里面我做了一个flag判断,防止用户在没有拍照的情况下就上传照片,这样肯定是不行的,然后里面还有一个 是将 base64 格式的图片上传,这个和普通的文件上传还有点不一样,在服务器里面需要把转base64的图片生成具体的图片文件,这个在后面服务端处理。

<script>
var flag = 0;
var width="200";
var height="300";
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
    } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
    }
}
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

function success(stream) {
    //兼容webkit核心浏览器
    let CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
    console.log(stream);
    //video.src = CompatibleURL.createObjectURL(stream);
    video.srcObject = stream;
    video.play();
}
function error(error) {
   alert('访问用户媒体设备失败');
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    //调用用户媒体设备, 访问摄像头
    getUserMedia({video : {width: width, height: height}}, success, error);
} else {
    alert('不支持访问用户媒体');
}
document.getElementById('capture').addEventListener('click', function () {
    context.drawImage(video, 0, 0, width, height);
    flag = 1 ;
})
 
function is_flag() {
   if (flag){
       uploadImage();
   }else {
       alert("请先拍照!谢谢!");
   }
}
  // ajax提交数据 
function uploadImage() {
    var imgData = canvas.toDataURL();
     $.ajax({
         type: "post",
        //后端需要调用的地址
        url: "{:url('baseimg_upload')}",
        contentType : "application/json ; charset=utf-8",
        data: JSON.stringify({
            "image":imgData
        }),
         dataType: 'json',
        success: function (res) {
          //  console.log(res);
            if (res.status==1){
                $('#upText').html('<span style="color: #009688;">上传成功!!!</span>');
                $('#image').val(res.file);
            } else {
                layer.msg(res.info,{time:2000,icon:5});
            }
        },
        error: function (res) {
            layer.msg(res.info,{time:2000,icon:5});
        }
    })
}
</script>

 

PHP端:

这里我的后台是用的tp5框架。

public  function baseimg_upload(){
    $base64_img = input('image');
    $base64_img = str_replace('', '+', $base64_img);
    $up_dir = ROOT_PATH. DS . 'uploads' . DS . 'image'. DS .date('Ymd');
    if(!file_exists($up_dir)){
        mkdir($up_dir,0777,true);
    }
    if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){
        $type = $result[2];
        if(in_array($type, array('pjpeg', 'jpeg', 'jpg', 'gif', 'bmp', 'png'))){
            $randStr = str_shuffle('1234567890'); //随机字符串
            $rand = substr($randStr,0,4); // 返回前四位
             $img_name=date('YmdHis').$rand.'.'.$type;
            $new_img_path = DS . 'uploads' . DS . 'image'.DS.date('Ymd').DS.$img_name;
            $new_file =$up_dir."/".$img_name;
            $res_img= file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)));
            if($res_img){
                return json(["file"=>$new_img_path,"status" => 1]);
            }
            //上传失败
            return json(['status' => 5, 'info' => "图片上传失败"]);
        }
        //文件类型错误
        return json(['status' => 5, 'info' => "文件类型错误"]);
    }
    //文件错误
    return json(['status' => 5, 'info' => "文件错误"]);
}

 

在这里还得提醒一下: 首先您得有摄像头这个东西,然后如果是本地使用的话,会有一个弹窗提示用户在是用您的摄像头,需要点击允许,如果是在服务器上远程(也就是通过域名网站打开)使用,就需要站点用ssl 也就是 https才可以调取成功,http是不行的。

到这里就基本上可以实现拍照上传了,如果有什么问题可以留言我们一起讨论,互相学习。

 

打赏
微信扫一扫支付 微信扫一扫支付
微信logo微信扫一扫        微信logo支付宝扫一扫
你的鼓励是我前进的动力!

给我留言

Copyright © WEB小工匠 保留所有权利.   渝ICP备15008469号

渝公网安备 50023602000173号

用户登录

分享到: