网站优化毕业设计,网站建设的法律依据,WordPress防红,赣榆县建设局网站目录 一、需求
二、开发语言
三、效果
四、业务逻辑#xff1a;
五、web端调用摄像头
六、示例代码
1、前端
2、后端 一、需求
web端使用jquery调用摄像头拍照#xff0c;并使用PHP把base64编码转换成png格式图片#xff0c;下载到本地。
由于js不能指定图片存储的…目录 一、需求
二、开发语言
三、效果
四、业务逻辑
五、web端调用摄像头
六、示例代码
1、前端
2、后端 一、需求
web端使用jquery调用摄像头拍照并使用PHP把base64编码转换成png格式图片下载到本地。
由于js不能指定图片存储的位置所以需要把base64图像数据传到后台由后台存储到指定位置。
二、开发语言
前端JS
后端PHP
三、效果
点击“拍摄图像”按钮自动连续拍摄10张并上传到后台存放到指定位置并在前端显示预览图像 四、业务逻辑
① 前端点击“拍摄图像”按钮开始拍照我这里的需求是连续拍摄10张
② 前端获取到base64编码图像数据并发送到后端
③ 后端接收到base64编码后转换成PNG格式并保存到指定位置
④ 图片存储成功后返回图片路径给前端
⑤ 前端显示拍摄的图像
五、web端调用摄像头
web端调用摄像头使用“webcam.js”插件使用webcam.js调用摄像头前提是项目是https否则没有获取摄像头的权限。
WebcamJS:jQuery移动端调用摄像头拍照插件WebcamJS
六、示例代码
1、前端
HTML图像采集区
style typetext/css#open-power{transition: transform 0.3s ease-in-out; /* 添加过渡效果使变换更平滑 */ transform-origin: center center; /* 变换原点设置为图片中心 */ width: 100%; /* 初始尺寸设置为容器宽度 */ height: auto; /* 保持图片的宽高比 */ }#imageContainer{overflow: hidden; /* 隐藏超出容器的部分 */position: relative; /* 如果需要相对于容器定位图片可以添加这个属性 */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 classlayui-col-md8 layui-col-sm8 layui-col-xs12div classlayui-rowdiv classlayui-col-md12 layui-col-sm12 layui-col-xs12fieldset classlayui-elem-fieldlegend图像采集区/legenddiv classlayui-field-box!-- 图像 --div idimageContainerdiv idopen-power classmain__camera-power flex-centerspan classmain__camera-power--spanimg src/home/images/camera.png altpower //spanp classmain__camera-power--hint请开启摄像头权限/p/div/div/div/fieldset/div/div
/div
HTML拍摄图像按钮
div classlayui-col-md6 layui-col-sm6 layui-col-xs12div classpaizhao 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 classlayui-icon layui-icon-camera-fill stylefont-size: 30px; color: #555;/i br/拍摄图像/div
/div
HTML图片预览区域
style
/* 图像预览区域 */
#results { background:#f8f8f8; }
#results img { width: 160px; height: 120px; margin: 3px}
/stylediv classlayui-row stylewidth: 98%; margin: 1% auto; div classlayui-col-md12 layui-col-sm12 layui-col-xs12div styleborder: 1px solid #e6e6e6; height: 120px;overflow:auto;div idresults stylepYour 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 typetext/javascript charsetutf-8/script// 初始化操作 设置摄像头区域
$(function(){// 获取窗口尺寸并设置摄像头宽高为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)// 设置摄像头宽高Webcam.set({width: cameraWidth,height: cameraHeight,jpeg_quality: 90});// 附加摄像头到容器Webcam.attach(#open-power);}// 初始设置setCameraSize();// 监听窗口大小改变事件window.addEventListener(resize, setCameraSize);});// 拍摄图像
var c 1 // 图像张数
var c2 1; // 图像张数
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 stylecolor:green【yinpian】/span图像正在采集并处理请稍后...$(#systip).prepend(tip_html)// 开始拍照take_snapshot();// 定时 每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)} );// 图片数量1c c1if (c 10) {// 十张采集完成结束采集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) {// 把返回的图像地址追加显示到图像预览区域var img new Image();img.src /res.datadocument.getElementById(results).appendChild( img );console.log(img)c2 c21console.log(c2)if (c2 10) {layer.msg(10张采集完成请调整饮片再次采集, {time: 3000, icon:1});tip_html br/span stylecolor:green【yinpian】/span图像10张采集完成请调整图像再次采集$(#systip).prepend(tip_html)}}}})
}
2、后端
接收前端传来的base64编码把base64编码数据转存成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); //创建目录chmod($path, 0700); //赋予权限}$uid session(uid);//确保图片名唯一防止重名产生覆盖$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】控制摄像头缩放监控画面大小并保存可视画面为图片_代码怎么实现监控视频怎么放大画面-CSDN博客
