js开启摄像头,拍摄图片,传递到后台,保存到本地
html代码
<video id="video" width="400" height="300"></video>
<button id='tack'> snap shot</button>
<canvas id='canvas' width='400' height='300'></canvas>
<img id='img' src=''>
js代码
<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL; //媒体对象
//mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，
该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。
// var mediaDevices = navigator.mediaDevices;
//MediaDevices 是一个单例对象。通常，您只需直接使用此对象的成员
// navigator.mediaDevices.getUserMedia() ;
//Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { //如果可以得到//MediaDevices.getUserMedia()会提示用户给予使用媒体输入的许可，
媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。
此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和
屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、
A/D转换器等等），也可能是其它轨道类型。 详细介绍看APInavigator.mediaDevices.getUserMedia({
video: { width: 500, height: 500 },
audio: false
}).then(function(stream) {
video.srcObject = stream; //将生成的媒体流给video作为视频流播放
video.play(); //播放视频
}).catch(function(err) {
console.log(err);
});
} else {
this.$Message.error('没有检测到摄像头,请确认链接!!!');
}//响应点击时间 保存视频区域成图片
snap.addEventListener('click', function(){
//绘制canvas图形canvas的详细手册
canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
//把canvas图像转为img图片/ /canvas.toDataURL(type, encoderOptions);
//type 可选 图片格式，默认为 image/png
//encoderOptions 可选 在指定图片格式为 image/jpeg 或 image/webp的情况下，
//可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。
//其他参数会被忽略。 返回值 包含 data URI 的DOMString。
img.src = canvas.toDataURL("image/png");
}
)
</script>
java代码
//canvasUrl canvas生成的base64编码的图片信息,也就是上面说的canvas.toDataURL("image/png");
//filePth 上传文件的路径
private String addCanvasPic(String canvasUrl,String filePth)throws Exception {
String imageDateB64 = canvasUrl.substring(22); //处理canvasUrl,去掉头信息data:image/png;base64
BASE64Decoder decoder = new BASE64Decoder(); //此类是sun公司的内部类,无法直接使用,百度解决
byte[] b = decoder.decodeBuffer(imageDateB64);//解码转成字节数组
ByteArrayInputStream bais = new ByteArrayInputStream(b); //字节数组输入流
BufferedImage bufferedImage = ImageIO.read(bais); // 将图片加载到内存中
//因为js里我们生成的图片是png格式,如果想转化格式的话,在内存中创建一个新的等大的空白图片
BufferedImage newBufferedImage =
new BufferedImage(bufferedImage.getWidth(),bufferedImage.getHeight(), BufferedImage.TYPE_INT_RGB);
//在新图片生绘制老图片
newBufferedImage.createGraphics().drawImage(bufferedImage, 0, 0, null);
String dirPath = AppConfig.getUploadRoot() +filePth ;
//File dirFile = new File(dirPath);
// if (!dirFile.exists()){
// dirFile.mkdirs();
// }
//创建一个.JPG文件
File newFile = new File(dirPath+".jpg");
//将内存中的图片写入到本地文件
ImageIO.write(newBufferedImage, "jpg", newFile);
return dirPath+".jpg";
}
浪客行1213的简书
