JAVAWEB照相带完整例子

朱雀 2022-08-10 14:48 183阅读 0赞

JAVAWEB照相带完整例子

资源http://download.csdn.net/detail/bjl373842798/7698003

JS

$(function() {
    	LODOP=getLodop();  
    	var pos = 0, ctx = null, image = [];
    	var ctxh = null;
    	$("#webcam").webcam({
    		width: 320,//320
    		height: 240,//240
    		mode: "callback",
    		swffile: "${ctx}js/jQuery-webcam-master/jscam_canvas_only.swf",
    		onSave: function(data) {
    		    var col = data.split(";");
    		    var img = image;
    		    // for(var i = 0; i < 320; i++) {
    		    for(var i = 0; i < 320; i++) {
    		        var tmp = parseInt(col[i]);
    		        img.data[pos + 0] = (tmp >> 16) & 0xff;
    		        img.data[pos + 1] = (tmp >> 8) & 0xff;
    		        img.data[pos + 2] = tmp & 0xff;
    		        img.data[pos + 3] = 0xff;
    		        pos+= 4;
    		    }
    			//if (pos >= 4 * 320 * 240) {
    		    if (pos >= 4 * 320 * 240) {
    		    	
    		    	//ctxh.clearRect(0, 0, 320, 240);
    		    	ctxh.putImageData(img, 0, 0);
    		    	image = ctxh.getImageData(0, 0, 320, 240);
    
    		    	ctx.clearRect(0, 0, 160, 200);
    		        ctx.putImageData(image,-80,-40,80,40,160,200);
    		      
    		        pos = 0;
    		    }
    		},
    		onCapture: function () {
    			webcam.save();
    			jQuery("#flash").css("display", "block");
    			jQuery("#flash").fadeOut("fast", function () {
    				jQuery("#flash").css("opacity", 1);
    			});
    			webcam.save();
    		}
    	});
    
    	window.addEventListener("load", function() {
    
    	 jQuery("body").append("<div id=\"flash\"></div>");
    	 var canvas = document.getElementById("canvas");
    
    	 if (canvas.getContext) {
    		 ctx = document.getElementById("canvas").getContext("2d");
    		 ctxh = document.getElementById("canvashidden").getContext("2d");
    		
    		 ctx.clearRect(0, 0, 160, 200);
    		 ctxh.clearRect(0, 0,320, 240);
    		 var img = new Image();
    		 
    		 img.src = "<%=basePath %>${examPeoplePo.pic}";
    		 
    		 img.onload = function() {
    		 	ctx.drawImage(img, 0, 0);
    		 	ctxh.drawImage(img, 152, 50);
    		 }
    		 
    		 image = ctxh.getImageData(0, 0, 320, 240);
    	 }
    	}, false);
    
    });
     	
    	// 上传图片，jQuery版
    	function sendImage(){
    	  // 获取 canvas DOM 对象
    	  var canvas = document.getElementById("canvas");
    	  // 获取Base64编码后的图像数据，格式是字符串
    	  // "data:image/png;base64,"开头,需要在客户端或者服务器端将其去掉，后面的部分可以直接写入文件。
    	  var dataurl = canvas.toDataURL("image/png");
    	  // 为安全 对URI进行编码
    	  // data%3Aimage%2Fpng%3Bbase64%2C 开头
    	  var imagedata =  encodeURIComponent(dataurl);
    	 
    	  var data = {
    			  exampeopleid: $("#exampeopleid").val(),
    			  jkzseq: $("#jkzseq").val(),
    	          fileinput: imagedata
    	   };
    	  $.ajax({
    			type : "POST",
    			url : "uploadExamPic.action",
    			data : data,
    			beforeSend : function(XMLHttpRequest) {
    				//loading();
    			},
    			success : function(data) {
    				var json = eval(arguments[2].responseText);
    				if (json[0].result == "ok") {
    					$("#pic").val(json[0].filepath);
    					LODOP.ADD_PRINT_IMAGE(124 ,530 , 130, 185,"<img border='0' src='<%=basePath %>json[0].filepath'>");	
    					document.getElementById("printdiv").style.display = "block";
    				}else{
    					$.messager.alert("提示",json[0].message,"error");
    				}
    			}
    		});
    	}

页面

<a  class="easyui-linkbutton"
                     href="javascript:webcam.capture();void(0);">照    相</a>
    
    <canvas id="canvas" width="160" height="200"></canvas>
    
    <div style="display: none;">
     <canvas id="canvashidden" width="320" height="240" ></canvas>
     </div>

后台

base64 工具类

package com.wx.common.utils;
    
    import java.io.File;
    import java.io.FileNotFoundException;
    import java.io.FileOutputStream;
    import java.io.IOException;
    
    import sun.misc.BASE64Decoder;
    
    
    public class Base64 {
    	/**
    	 * 对字符串进行Base64解码
    	 * 
    	 * @param s
    	 *            要解码的字符串
    	 * @return 返回解码后的字符串
    	 */
    	public static byte[] decode(String s) {
    		 
    	        BASE64Decoder decoder=new BASE64Decoder();  
    	        byte[] bytes=null;  
    	        try {  
    	            bytes=decoder.decodeBuffer(s);  
    	        } catch (IOException e) {  
    	            e.printStackTrace();  
    	        }  
    	        return bytes;  
    	}
    
    	/**
    	 * 得到经过Base64解码的图像二进制数据
    	 */
    	public static byte[] getImgData(String fileUrl) {
    		/*
    		 * 利用canvas元素的toDataURL("image/jpeg")方法生成的图像地址格式为： 
    		 * 第一部分：data:image/jpeg;base64 中间一个逗号
    		 * 第二部分：一个经过base64编码的字符串，通过Base64解码后即可得到该图像原始二进制数据
    		 */
    		//String[] data = fileUrl.split(",");// 这里fileUrl就是前台toDataURL（）方法传过来的数据
    		return Base64.decode(fileUrl);
    	}
    
    	/**
    	 * 保存Base64解码后的二进制数据到文件
    	 * 
    	 * @param base64Str
    	 *            经Base64解码后的图片原始二进制数据
    	 * @param path
    	 *            文件路径
    	 */
    	public static void saveImage(byte[] imageBytes, String path) {
    		File file = new File(path);
    		FileOutputStream outputStream = null;
    		try {
    			outputStream = new FileOutputStream(file);
    			outputStream.write(imageBytes);
    		} catch (FileNotFoundException e) {
    			e.printStackTrace();
    		} catch (IOException e) {
    			e.printStackTrace();
    		} finally {
    			closeSteam(outputStream);
    		}
    	}
    
    	/**
    	 * 关闭文件输出流
    	 * 
    	 * @param outputStream
    	 */
    	public static void closeSteam(FileOutputStream outputStream) {
    		if (outputStream != null) {
    			try {
    				outputStream.close();
    			} catch (IOException e) {
    				e.printStackTrace();
    			}
    		}
    	}
    	
    		/**
    		 * 对字符串进行Base64解码
    		 * @param s 要解码的字符串
    		 * @return 返回解码后的字符串
    		 */
    	public static String decodeStr(String s){
    			String decoded_str=null;
    			BASE64Decoder decoder=new BASE64Decoder();
    			try {
    				byte[] bytes=decoder.decodeBuffer(s);
    				decoded_str=new String(bytes);
    			} catch (IOException e) {
    				e.printStackTrace();
    			}
    			return decoded_str;
    	}
    	
    	/**
    	 * 得到经过Base64解码的图像二进制数据
    	 */
    	public static String getImgDataStr(String fileUrl){
    		/*
    		 * 利用canvas元素的toDataURL("image/jpeg")方法生成的图像地址格式为：
    		 *	第一部分：data:image/jpeg;base64
    		 * 	中间一个逗号
    		 * 	第二部分：一个经过base64编码的字符串，通过Base64解码后即可得到该图像原始二进制数据
    		 */
    		String[] data=fileUrl.split(",");//这里fileUrl就是前台toDataURL（）方法传过来的数据
    		return Base64.decodeStr(data[1]);
    	}
    
    	/**
    	 * 保存Base64解码后的二进制数据到文件
    	 * @param base64Str 经Base64解码后的图片原始二进制数据
    	 * @param path 文件路径
    	 */
    	public static void saveImageStr(String base64Str,String path){
    		File file=new File(path);
    		FileOutputStream outputStream=null;
    		try {
    			outputStream=new FileOutputStream(file);
    			outputStream.write(base64Str.getBytes());
    		} catch (FileNotFoundException e) {
    			e.printStackTrace();
    		} catch (IOException e) {
    			e.printStackTrace();
    		} finally{
    			closeSteam(outputStream);
    		}
    	}
    
    	
    }

ACITON

public String uploadExamPic() {
    		HttpServletRequest request = ServletActionContext.getRequest();
    		HttpServletResponse response = ServletActionContext.getResponse();
    
    		String exampeopleid = request.getParameter("exampeopleid");
    		String img = request.getParameter("fileinput");
    		
    		logger.info("upload img=" + img);
    
    		String realpath = ServletActionContext.getServletContext().getRealPath("/");
    		String filepath = ConfigurationFile.pictureRootPath + "/" + user.getEnterid() + "/" + Tools.getTodayStr();
    
    		FileUtils.isExist(realpath + filepath);
    		String savefilepath = filepath + "/" + exampeopleid + ".png";
    		
    		String imgStr = img.substring(30);// 去掉头文件
    		logger.info("截取文件信息substring(30)后 imgStr=" + imgStr);
    		try {
    			imgStr = URLDecoder.decode(imgStr, "UTF-8");
    			logger.info("截取文件信息后 URLDecoder.decode imgStr=" + imgStr);
    		} catch (UnsupportedEncodingException e1) {
    			e1.printStackTrace();
    		}
    		
    		byte[] imgdata = Base64.getImgData(imgStr);
    		Base64.saveImage(imgdata, realpath + savefilepath);
    		logger.info("realpath+savefilepath=" + realpath + savefilepath);
    		
    		ExamPeople examPeople = examPeopleService.load(exampeopleid);
    		examPeople.setPic(savefilepath);
    		examPeople.setUpdatetime(new Date());
    		examPeopleService.add(examPeople);
    		
    		String jsonData = "[{\"result\":\"ok\",\"message\":\"照片上传成功！\",\"filepath\":\""+savefilepath+"\"}]";
    		response.setCharacterEncoding("utf-8");
    		try {
    			PrintWriter out = response.getWriter();
    			out.println(jsonData);
    			out.flush();
    			out.close();
    		} catch (IOException e) {
    			logger.error("uploadExamPic()", e);
    			e.printStackTrace();
    		}
    		return null;
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关【JavaWeb】CSS学习完整篇

![在这里插入图片描述][2fd1d54d9a2546e4b2535a4b9834cfa4.jpeg_pic_center] `推荐学习专栏：`[JavaWeb学习专栏

ゞ浴缸里的玫瑰/ 2024年03月31日 08:54/ 0 赞/ 44 阅读

相关 JAVAWEB照相带完整例子

JAVAWEB照相带完整例子资源http://download.csdn.net/detail/bjl373842798/7698003 JS $(

朱雀/ 2022年08月10日 14:48/ 0 赞/ 184 阅读

相关 Javaweb面试题（带答案）

我的个人博客开通了，地址：[https://timewentby.com][https_timewentby.com] 欢迎访问 1 Ajax你以前用过么?简单介绍一下

╰半橙微兮°/ 2022年07月14日 09:19/ 0 赞/ 223 阅读

相关 JqGrid 完整例子

JqGrid 例子可以参考 http://blog.mn886.net/jqGrid/ 完整实例压缩包 http://download.csdn.net/detai

今天药忘吃喽~/ 2022年06月13日 09:50/ 0 赞/ 179 阅读

相关 Javaweb之简单例子(二)

Javaweb之简单例子(二) 一、简述在Javaweb之简单例子(一)的基础上添加验证码、图片上传功能，并使用session保存登录状态。文件打

àì夳堔傛蜴生んèń/ 2022年05月21日 10:58/ 0 赞/ 246 阅读

相关 Javaweb之简单例子(一)

Javaweb 之简单例子(一)

﹏ヽ暗。殇╰゛Y/ 2022年05月21日 04:14/ 0 赞/ 205 阅读

相关完整的javaweb项目(新手)

本案例使用Servlet+jsp制作,用MyEclipse和Mysql数据库进行搭建，详细介绍了搭建过程及知识点。本项目实现的功能有： 1.用户注册 2.用户登录

清疚/ 2022年02月16日 04:02/ 0 赞/ 720 阅读

相关 Tensorflow常见API讲解（带例子）

目录 1.tf.random.set\_random\_seed(seed)/tf.set\_random\_seed(seed) 2. tf.layers.dens

心已赠人/ 2022年02月14日 21:21/ 0 赞/ 167 阅读

相关完整的文件下载例子

前段，js 下载 1，采用ajax异步调用，后台生成文件，返回前段，文件的名称 2，文件名称采用唯一的UUID生成 function ajaxExpor

淡淡的烟草味﹌/ 2022年02月02日 18:29/ 0 赞/ 208 阅读

相关 JqGrid完整例子

之前写过一篇过于ajax异步加载jqgrid的文章，那个只是一个特殊的情况，如果创建不同数据库表的jqgrid，必须分别写servlet，dao层和连接池，很麻烦，今天我写了一

「爱情、让人受尽委屈。」/ 2021年08月30日 00:04/ 0 赞/ 414 阅读