记录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>
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();
        });
    }
}

 

posted @ 2024-01-04 14:09  lovelylily  阅读(225)  评论(0编辑  收藏  举报