目錄

一、需求

二、開發(fā)語言

三、效果

四、業(yè)務(wù)邏輯：

五、web端調(diào)用攝像頭

六、示例代碼

1、前端

2、后端

---

一、需求

web端使用jquery調(diào)用攝像頭拍照，并使用PHP把base64編碼轉(zhuǎn)換成png格式圖片，下載到本地。

由于js不能指定圖片存儲(chǔ)的位置，所以需要把base64圖像數(shù)據(jù)傳到后臺(tái)，由后臺(tái)存儲(chǔ)到指定位置。

二、開發(fā)語言

前端：JS

后端：PHP

三、效果

點(diǎn)擊“拍攝圖像”按鈕，自動(dòng)連續(xù)拍攝10張并上傳到后臺(tái)，存放到指定位置，并在前端顯示預(yù)覽圖像

四、業(yè)務(wù)邏輯：

① 前端點(diǎn)擊“拍攝圖像”按鈕，開始拍照，我這里的需求是連續(xù)拍攝10張

② 前端獲取到base64編碼圖像數(shù)據(jù)，并發(fā)送到后端

③ 后端接收到base64編碼后，轉(zhuǎn)換成PNG格式并保存到指定位置

④ 圖片存儲(chǔ)成功后，返回圖片路徑給前端

⑤ 前端顯示拍攝的圖像

五、web端調(diào)用攝像頭

web端調(diào)用攝像頭使用“webcam.js”插件，使用webcam.js調(diào)用攝像頭前提是項(xiàng)目是https，否則沒有獲取攝像頭的權(quán)限。

WebcamJS:jQuery移動(dòng)端調(diào)用攝像頭拍照插件WebcamJS

六、示例代碼

1、前端

HTML：圖像采集區(qū)

<style type="text/css">#open-power{transition: transform 0.3s ease-in-out; /* 添加過渡效果，使變換更平滑 */  transform-origin: center center; /* 變換原點(diǎn)設(shè)置為圖片中心 */  width: 100%; /* 初始尺寸設(shè)置為容器寬度 */  height: auto; /* 保持圖片的寬高比 */  }#imageContainer{overflow: hidden; /* 隱藏超出容器的部分   */position: relative; /* 如果需要相對于容器定位圖片，可以添加這個(gè)屬性 */margin: 0 auto;background:rgba(41, 123, 255, 0.06);border-radius:18px;border:1px dashed #297BFF;cursor:pointer;box-shadow:4px 4px 18px 0px rgb(0 0 0 / 8%);padding: 10px;}.main__camera-power{background: none;border-radius: 0;border: none;cursor:none;margin: 0 auto;box-shadow:none; padding: 0px;}
</style>
<div class="layui-col-md8 layui-col-sm8 layui-col-xs12"><div class="layui-row"><div class="layui-col-md12 layui-col-sm12 layui-col-xs12"><fieldset class="layui-elem-field"><legend>圖像采集區(qū)</legend><div class="layui-field-box"><!-- 圖像 --><div id="imageContainer"><div id="open-power" class="main__camera-power flex-center"><span class="main__camera-power--span"><img src="/home/images/camera.png" alt="power" /></span><p class="main__camera-power--hint">請開啟攝像頭權(quán)限</p></div></div></div></fieldset></div></div>
</div>

HTML：拍攝圖像按鈕

<div class="layui-col-md6 layui-col-sm6 layui-col-xs12"><div class="paizhao" style=" width: 4.5rem; height: 4rem; margin: 0 1rem; background: #F0F0F0; text-align: center; box-shadow: 4px 4px 10px #888888; font-size: 0.9rem; border-radius: 10px; cursor: pointer; color: #000; font-size: 0.9rem;" ><i class="layui-icon layui-icon-camera-fill" style="font-size: 30px; color: #555;"></i> <br/>拍攝圖像</div>
</div>

HTML：圖片預(yù)覽區(qū)域

<style>
/*	圖像預(yù)覽區(qū)域 */
#results {   background:#f8f8f8; }
#results > img { width: 160px; height: 120px; margin: 3px}
</style><div class="layui-row" style="width: 98%; margin: 1% auto; "><div class="layui-col-md12 layui-col-sm12 layui-col-xs12"><div style="border: 1px solid #e6e6e6; height: 120px;overflow:auto;"><div id="results" style=""><p>Your captured images will appear here...</p></div></div></div>
</div>

JS：

<script src="/home/js/jquery-1.12.3.min.js"></script>
<script src="/home/js/webcam.js" type="text/javascript" charset="utf-8"></script>// 初始化操作  設(shè)置攝像頭區(qū)域 
$(function(){// 獲取窗口尺寸并設(shè)置攝像頭寬高為80%function setCameraSize() {var windowWidth = window.innerWidth;var windowHeight = window.innerHeight;var cameraWidth = windowWidth * 0.45;var cameraHeight = windowHeight * 0.68;$("#imageContainer").css('width',cameraWidth)$("#imageContainer").css('height',cameraHeight)// 設(shè)置攝像頭寬高Webcam.set({width: cameraWidth,height: cameraHeight,jpeg_quality: 90});// 附加攝像頭到容器Webcam.attach('#open-power');}// 初始設(shè)置setCameraSize();// 監(jiān)聽窗口大小改變事件window.addEventListener('resize', setCameraSize);});// 拍攝圖像
var c = 1  // 圖像張數(shù)
var c2 = 1;	// 圖像張數(shù)
var timer = null// 開始拍照
$(".paizhao").click(function () {c = 1c2 = 1// 拍照前先清空div里已存在的圖像document.getElementById('results').innerHTML = '';var yinpian = $('#yinpian').val();if (yinpian == '') {layer.msg('請先選擇飲片名稱', {time: 3000, icon:2});clearTimeout( timer );return false}layer.msg('圖像正在采集并處理，請稍后...', {time: 3000, icon:0});tip_html = '<br/><span style="color:green">【'+yinpian+'】</span>圖像正在采集并處理，請稍后...'$("#systip").prepend(tip_html)// 開始拍照take_snapshot();// 定時(shí) 每250ms拍攝一次timer = setInterval( take_snapshot, 250 );
})function take_snapshot() {// 獲取飲片名稱var yinpian = $('#yinpian').val();if (yinpian == '') {layer.msg('請先選擇飲片名稱', {time: 3000, icon:2});clearTimeout( timer );return false}Webcam.snap( function(data_uri) {// 圖片保存到本地saveJpg(data_uri,yinpian)} );// 圖片數(shù)量+1c = c+1if (c > 10) {// 十張采集完成，結(jié)束采集clearTimeout( timer );timer = null;}}// Base64保存為jpg
function saveJpg(base64data,yinpian) {$.ajax({url:'/index/index/saveJpg',type:'POST',dataType:'JSON',data:{img:base64data,yinpian:yinpian},success:function (res) {console.log(res)var img_html = ''if (res.code == '200') {// 把返回的圖像地址追加顯示到圖像預(yù)覽區(qū)域var img = new Image();img.src = '/'+res.datadocument.getElementById('results').appendChild( img );console.log(img)c2 = c2+1console.log(c2)if (c2 > 10) {layer.msg('10張采集完成，請調(diào)整飲片再次采集', {time: 3000, icon:1});tip_html = '<br/><span style="color:green">【'+yinpian+'】</span>圖像10張采集完成，請調(diào)整圖像再次采集！'$("#systip").prepend(tip_html)}}}})
}

2、后端

接收前端傳來的base64編碼，把base64編碼數(shù)據(jù)轉(zhuǎn)存成png，并存放到指定位置

/**
* base64保存為jpg
*/
public function saveJpg()
{if (request()->isPost()) {$baseImg = trim(input('post.img'));     // base64編碼$yinpian = trim(input('post.yinpian'));     // 飲片名稱if (!empty($baseImg) && !empty($yinpian)) {//圖片存放的路徑$path = "uploads/images/".$yinpian.'/';if (!file_exists($path)) {mkdir($path, 0700, true); //創(chuàng)建目錄chmod($path, 0700); //賦予權(quán)限}$uid = session('uid');//確保圖片名唯一，防止重名產(chǎn)生覆蓋$imageName = 'wx_' .$uid.'_' . rand(1000, 9000) . time(). '.jpg';//判斷是否有逗號 如果有就截取后半部分if (strstr($baseImg,",")){$baseImg = explode(',',$baseImg);$baseImg = $baseImg[1];}//圖片路徑$imageSrc= $path . $imageName;//生成文件夾和圖片$r = file_put_contents($imageSrc, base64_decode($baseImg));if($r){return apiResponse('200','圖像保存成功',$imageSrc);}else{return apiResponse('110','圖像保存失敗');}}else{return apiResponse('110','初始化失敗，請刷新頁面');}}else{return apiResponse('110','非法請求');}
}

如果有控制攝像頭放大縮小畫面的需求，可參考另外一篇【PHP】控制攝像頭縮放監(jiān)控畫面大小，并保存可視畫面為圖片_代碼怎么實(shí)現(xiàn)監(jiān)控視頻怎么放大畫面-CSDN博客