SSM框架摄像头拍照将图片保存在本地或服务器中

最新推荐文章于 2021-07-07 14:51:23 发布

十里有春风

最新推荐文章于 2021-07-07 14:51:23 发布

阅读量596

点赞数

文章标签： java canvas

本文链接：https://blog.csdn.net/mouxiKing/article/details/108145136

版权

通过在网上查找资料学习了一下，做出来一个通过摄像头拍照，再将照片保存在本地或者上传到服务其中的一个小demo,话不多说直接上代码

java依赖

		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
			<version>1.11</version>
		</dependency>

paizhao.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拍照上传</title>
<style>
video {
	width: 300px;
	height: 400px;
	background-color: aquamarine;
	display: block;
}
#as{
width:50%;
margin:0 auto;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
	<div id="as">
		<form name="myform" action="fileuploadfice.do" method="post"
			enctype="multipart/form-data">
			<div style="float: left;">
				<video id="video"></video>
				<input type="button" title="拍照" value="拍照" onclick="getPhoto();" />
			</div>
			<div style="float: left;">
				<canvas id="canvas1" height="400px" name="photo"></canvas>
				<input type="hidden" id="pic" name="pic" value="" />
			</div>
		</form>
		<input type="button" onclick="shangchuan()" value="上传" />
	</div>
	<p>${kong}</p>
	<script>
		var video = document.getElementById('video');
		if (navigator.mediaDevices.getUserMedia) {
			//最新的标准API
			navigator.mediaDevices.getUserMedia({
				video : {
					width : 300,
					height : 400
				}
			}).then(success);
		} else if (navigator.webkitGetUserMedia) {
			//webkit核心浏览器
			navigator.webkitGetUserMedia({
				video : {
					width : 300,
					height : 400
				}
			}, success, error)
		} else if (navigator.mozGetUserMedia) {
			//firfox浏览器
			navigator.mozGetUserMedia({
				video : {
					width : 300,
					height : 400
				}
			}, success, error);
		} else if (navigator.getUserMedia) {
			//旧版API
			navigator.getUserMedia({
				video : {
					width : 300,
					height : 400
				}
			}, success, error);
		}
		function success(stream) {
			//将视频流设置为video元素的源
			console.log(stream);
			video.srcObject = stream;
			video.play();
		}
		function error(error) {
			console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
		}

		var video = document.querySelector('video');
		var audio, audioType;

		var canvas1 = document.getElementById('canvas1');
		var context1 = canvas1.getContext('2d');

		// 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果  
		function drawVideoAtCanvas(video, context) {
			window.setInterval(function() {
				context.drawImage(video, 0, 0, 90, 120);
			}, 60);
		}
		//拍照  
		function getPhoto() {
			context1.drawImage(video, 0, 0, 300, 400);//将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。  
			var imgData = canvas1.toDataURL();//获取图片的base64格式的数据
			console.log(imgData);
		}
		function shangchuan() {
			var imgData = canvas1.toDataURL();
			document.getElementById('pic').value = imgData;
			document.myform.submit();
		}
	</script>
</body>
</html>

FaceController.java

package com.test.faceRecognition.controller;

import java.util.UUID;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import com.test.faceRecognition.service.FaceService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.test.faceRecognition.util.GenerateImage;

@Controller
public class FaceController {
	@Resource
	private FaceService faceService;

	@RequestMapping("/paizhao")
	public String paizhao() {
		return "paizhao";
	}
	@RequestMapping("/fileuploadfice")
	public String processUpload(String pic, HttpServletRequest request, Model model) throws Exception {
		// 定义文件保存的本地路径
		//String path="E:\\upload\\";//绝对路径,需要保存在哪个文件夹文件夹下
		// 如果webapp下没有upload文件夹会自动创建
		String path = request.getServletContext().getRealPath("/upload/");
		// 生成uuid作为文件称
		String uuid = UUID.randomUUID().toString().replaceAll("-", "") + ".jpg";
		boolean result=GenerateImage.generateImage(pic, path + uuid, request);
		if (result == false) {
			model.addAttribute("kong", "未上传成功");
		} else {
			model.addAttribute("kong", "上传成功");
		}
		return "paizhao";
	}
}

工具类
GenerateImage.java

package com.test.faceRecognition.util;

import java.io.FileOutputStream;
import java.io.OutputStream;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.codec.binary.Base64;

public class GenerateImage {
	public static boolean generateImage(String imgStr,String filePath,HttpServletRequest request) { 
		try {
			// Base64解码
			//截取字符转开头的data:image/png;base64
			imgStr = imgStr.replaceFirst("data:image/png;base64,", "");
			byte[] b = Base64.decodeBase64(imgStr);
			for (int i = 0; i < b.length; ++i) {
				if (b[i] < 0) {// 异常数据调整
					b[i] += 256;
				}
			}
			// 生成jpg图片,保存到本地或服务器
			OutputStream out = new FileOutputStream(filePath);
			out.write(b);
			out.flush();
			out.close();
			return true;
		} catch (Exception e) {
			e.printStackTrace();
			return false;
		}
	}
}

作为人生第一次发博客，还是有点小激动的，请大佬们多多关照，提提意见，不喜勿喷，谢谢！

十里有春风

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SSM框架摄像头拍照将图片保存在本地或服务器中

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar
复制链接

扫一扫