html+js实现系统拍照上传功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""/> <meta name="Description" content=""/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta http-equiv="Cache-Control" content="no-transform"/> <meta http-equiv="Cache-Control" content="no-siteapp"/> <meta http-equiv="content-language" content="zh-CN"/> <meta name="applicable-device" content="pc"> <meta name="mobile-agent" content="format=html5;url=http: "/> <link rel="alternate" media="only screen and(max-width: 640px)" href=" "/> <title>新闻推荐系统</title> <link rel="stylesheet" type="text/css" href="file/css/pc_common.css"/> <style> #capture{ position: absolute; right: 190px; bottom: -40px; } #video{ position: absolute; right: 0; top: 0; } #img{ position: absolute; left: 0; top: 0; } .auto{ position: absolute; left: 50%; top: 50%; height: 320px; margin-top: -160px; } #sure{ position: absolute; left: 210px; bottom: -40px; } button{ cursor: pointer; margin: 0 auto; border: 1px solid #f0f0f0; background: #5CACEE; color: #FFF; width: 100px; height: 36px; line-height: 36px; border-radius: 8px; text-align: center; /*禁止选择*/ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } </style> </head> <body> <div id="rrapp" v-cloak> <!--header--> <div class="city_wrap"> <div class="city"> <div style="text-align: left;width: 50%;float: left;"><a href="index.html">基于web的新闻推荐系统</a></div> <div style="text-align: right;width: 50%;float: right;" id="myuser"> <a href="login.html">登录</a>| <a href="login.html">注册</a> </div> </div> </div> <!--logo and search--> <div class="logo_search i_logo_search"> <a href="index.html" class="fl"><img src="file/img/pc/logo.png"/></a> <div class="fr"> <input type="text" name="q" value="" placeholder="请输入搜索关键词" class="keywords" v-model="search_key" @keyup.enter="search_index"/> <input type="submit" name="submit" value="" class="ser_btn"/> <a href="paizhao.html">拍照搜索</a> </div> </div> <!--nav--> <div class="nav_wrap"> <div class="change nav"> <ul class="clearbox"> <li class="a"> <h2>校园趣事</h2> <div class="link"> <a href="list.html?type=1" class="cg">学园风光</a> <a href="list.html?type=1" class="cg">教学资讯</a> </div> </li> <li class="b"> <h2>文化传承</h2> <div class="link"> <a href="list.html?type=2">言传身教</a> <a href="list.html?type=2">创新建设</a> <a href="list.html?type=2">国学文化</a> <a href="list.html?type=2" class="cg">礼义廉耻</a> <a href="list.html?type=2" class="cg">忠孝仁爱</a> <a href="list.html?type=2" class="cg">爱国教育</a> </div> </li> <li class="c"> <h2>健康教育</h2> <div class="link"> <a href="list.html?type=3">体育锻炼</a> <a href="list.html?type=3">心理健康</a> <a href="list.html?type=3">素质涵养</a> <a href="list.html?type=3">心理辅导</a> </div> </li> <li class="d"> <h2>少年国学</h2> <div class="link"> <a href="list.html?type=4" class="cg">考古专业</a> <a href="list.html?type=4" class="cg">唐代文化</a> <a href="list.html?type=4" class="cg">宋朝诗词</a> <a href="list.html?type=4" class="cg">元朝文欢</a> <a href="list.html?type=4">明清</a> </div> </li> <li class="e"> <h2>才智未来</h2> <div class="link"> <a href="list.html?type=5">创新能力</a> <a href="list.html?type=5">机器学习</a> </div> </li> </ul> </div> </div> </div> <div class="auto"> <video id="video" width="480" height="320" autoplay></video> <canvas id="canvas" width="480" height="320" style="display: none;"></canvas> <img src="1714447612266.jpg" id="img" width="480" height="320" style="margin-left: 20px;"> <div> <button id="capture" title="点击进行拍照">拍照</button> </div> <div> <button id="sure" title="是否用这张图片进行验证">确认</button> </div> </div> <!--footer--> <script src="file/js/libs/jquery-1.11.0.min.js"></script> <script src="file/js/libs/jquery.SuperSlide.2.1.1.js"></script> <script src="file/js/libs/jquery.nicescroll.js"></script> <script src="file/js/libs/pc_common.js"></script> <script type="text/javascript" src="file/js/libs/vue.min.js"></script> <script type="text/javascript" src="file/js/ref/comm.js"></script> <!--<script type="text/javascript" src="file/js/ref/recomm.js"></script>--> <script type="text/javascript" src="file/js/ref/index.js"></script> <script> var file ,stream; //访问用户媒体设备的兼容方法 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); stream = stream; //video.src = CompatibleURL.createObjectURL(stream); video.srcObject = stream; video.play(); } function error(error) { console.log(`访问用户媒体设备失败${error.name}, ${error.message}`); } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { //调用用户媒体设备, 访问摄像头 getUserMedia({video : {width: 480, height: 320}}, success, error); } else { alert('不支持访问用户媒体'); } // base64转文件 document.getElementById('capture').addEventListener('click', function () { context.drawImage(video, 0, 0, 480, 320); // 获取图片base64链接 var image = canvas.toDataURL('image/png'); // 定义一个img var img = document.getElementById("img"); //设置属性和src //img.id = "imgBoxxx"; img.src = image; //将图片添加到页面中 //document.body.appendChild(img); function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } file = new File([u8arr], filename, {type: mime}); return new File([u8arr], filename, {type: mime}); } console.log(dataURLtoFile(image, 'aa.png')); }) document.getElementById('sure').addEventListener('click', function () { window.location.href="search.html?keywords=''" var formData = new FormData(); formData.append("file",file); $.ajax({ type: "POST", // 数据提交类型 url: "***********", // 发送地址 data: formData, //发送数据 async: true, // 是否异步 processData: false, //processData 默认为false,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data contentType: false, success:function(data){ if(data.code === 200){ console.log(`${data.message}`); }else{ console.log(`${data.message}`); } }, error:function(e){ self.$message.warning(`${e}`); //console.log("不成功"+e); } }); stream.getTracks()[0].stop();//结束关闭流 }) </script> </body> </html> </body> </html>