最近在做一個小應用，里面有一個功能就是需要打開攝像頭拍照并且上傳，今天就記錄一下這個小功能。

HTML篇：

這里我是用的layui的樣式，需要先引用layui的樣式，才會有上圖的效果。

* 照片：

點擊拍照

點擊上傳

JS篇：

這里面我做了一個flag判斷，防止用戶在沒有拍照的情況下就上傳照片，這樣肯定是不行的，然后里面還有一個 是將 base64 格式的圖片上傳，這個和普通的文件上傳還有點不一樣，在服務器里面需要把轉base64的圖片生成具體的圖片文件，這個在后面服務端處理。

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('上傳成功!!!');

$('#image').val(res.file);

} else {

layer.msg(res.info,{time:2000,icon:5});

}

},

error: function (res) {

layer.msg(res.info,{time:2000,icon:5});

}

})

}

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是不行的。

到這里就基本上可以實現拍照上傳了，如果有什么問題可以留言我們一起討論，互相學習。

總結

以上是生活随笔為你收集整理的php调用本地摄像头,javascript 调用本地摄像头拍照 ajax提交上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。