记录Springboot要在H5中使用手机端摄像头拍照存储Base64格式图片
前面把openssl配置好了,现在在手机端就可以输入https://ip:port访问我的应用客户端了,今天在测试的过程中发现一些问题。
问题一:手机端点开后发现是前置摄像头。
需要加个video的配置项,facingMode:{exact:"environment"} 这个加了之后,在pc端打开摄像头就会报错,暂时只能在手机上调测了。
问题二:Android手机页面展现跟PC端一样,但是IOS的镜头一打开铺满屏幕
在html的video标签中添加属性playsinline="true",这样镜头就在它该待的小框里了,
问题三:兼容问题
参考了网上的H5通过navigator.mediaDevices.getUserMedia调用手机摄像头_苹果无法调用摄像头 navigator.mediadevices-CSDN博客
想了一下,我的应用不商用,纯友情开发,并且只给固定的几个人用,还是不搞兼容了,等他们发现不兼容再来找我吧!!!
记录四 canvas画出图片的存储
canvas.draw后转为了Base64格式,赋值给<img>标签的src属性,在ajax 做post提交时再转为jsonArray传递出去。
在服务器中,接收图片的jsonarray数据,将base64转为图片文件存在本地文件夹。 将路径地址存储到数据库表字段里。
Base64与图片的格式互转,可以在网上搜一下,很多现成的例子,我这边用的是
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.15</version>
</dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.15</version>
</dependency>
apache的包,
import org.apache.commons.codec.binary.Base64;
代码参考:
html
<div class="popup"> <p class="popup_title"> <em id="curPage" style="display: none"></em> <em id="curCleanId" style="display: none"></em> 请上传卫生检查不通过图片 </p> <div class="popup_content"> <div> <video id="video" class="canvas" playsinline="true" autoplay="autoplay"></video> <canvas id="canvas" class="canvas"></canvas> </div> </div> <div> <img onclick="takePhoto()" style="height: 30px;width: 30px;float: left" src="takepic.png" > <div id="picDisplayDiv"> </div> <button style="float: right;" onclick="hidePhotoPopup(1)">上传</button> <button style="float: right;" onclick="hidePhotoPopup(0)">取消</button> </div> </div>
js
function openMedia(){ let constraints = { video: { width: 120, height: 150, facingMode: { exact: "environment" } }, audio: false }; //获得video摄像头 let video = document.getElementById('video'); let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then((mediaStream) => { // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1]; mediaStreamTrack=mediaStream.getVideoTracks() video.srcObject = mediaStream; video.play(); }); } function takePhoto(){ let picArray=document.getElementById("picDisplayDiv").getElementsByTagName("img"); if(picArray.length>=3){ alert("当前仅支持上传3张图片"); return; } let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, 80, 50); let img = document.getElementById('canvas').toDataURL(); $("#picDisplayDiv").append("<img style=\"height: 80px;width: 100px;float: left\" src='"+img+"'>"); ctx.clearRect(0, 0, 80, 50); } function hidePhotoPopup(operation){ if(operation==1)//上传 { queryUsageList($("#curPage").val(),"addFailCheckInfo",$("#curCleanId").val()); } closeMedia(); let picDisplayDiv=document.getElementById("picDisplayDiv"); picDisplayDiv.innerHTML=""; document.getElementById('video').srcObject = null; $("#takePic").hide(); } function closeMedia() { let stream = document.getElementById('video').srcObject; if (stream != null) { let tracks = stream.getTracks(); tracks.forEach(function (track) { track.stop(); }); } }