canvas 画图 并上传到服务器

前端js canvas 获取摄像头图像

	 canvasUpload.width = videoElement.videoWidth;
				 canvasUpload.height = videoElement.videoHeight;
				 contextUpload.drawImage(video,0,0);
				 canvasUpload.toBlob(function (blob) {
					  // 图片ajax上传
					  var xhr = new XMLHttpRequest();
					  // 开始上传
					  xhr.open("POST", '/first', true);
					  xhr.onreadystatechange=function RequestCallBack(){
						  
						  if (xhr.readyState==4 && xhr.status==200)
						    {
						    $('#imgBox').append('<div class="imgContainer"><img  src="'+xhr.responseText+'" onclick="imgDisplay(this)"><p onclick="removeImg(this,'+0+')" class="imgDelete">删除</p></div>');
						       if($('#originalImg').val().trim()=='')
						    	   {
						    	   $('#originalImg').val(xhr.responseText);
						    	   }else
						    		   {
						    		   $('#originalImg').val( $('#originalImg').val()+'|'+xhr.responseText);
						    		   }
						    }
					  };
					  xhr.send(blob);    
					});
					

后端 服务器java Servlet

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.ruoyi.common.config.Global;

import sun.misc.BASE64Decoder;
import java.util.UUID;

/**
 * Servlet implementation class webcam
 */
@WebServlet(name = "ServletDemo1", urlPatterns = "/first")
public class ServletDemo1 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public ServletDemo1() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost3(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;char=utf-8");

		// 获得磁盘文件条目工厂
		DiskFileItemFactory factory = new DiskFileItemFactory();
		// 获取文件需要上传到的路径
		// String path = request.getRealPath("/upload");
		String path = "d:/shangchuan/";

		// 如果文件夹不存在 将创建文件夹
		if (!new File(path).exists()) {
			new File(path).mkdirs();
		}

		// 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
		// 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
		/**
		 * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem 格式的
		 * 然后再将其真正写到 对应目录的硬盘上
		 */
		factory.setRepository(new File(path));
		// 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
		factory.setSizeThreshold(1024 * 1024);

		// 高水平的API文件上传处理
		ServletFileUpload upload = new ServletFileUpload(factory);

		try {
			// 可以上传多个文件
			List<FileItem> list = (List<FileItem>) upload.parseRequest(request);

			for (FileItem item : list) {
				// 获取表单的属性名字
				String name = item.getFieldName();

				// 如果获取的 表单信息是普通的 文本 信息
				if (item.isFormField()) {
					// 获取用户具体输入的字符串 ，名字起得挺好，因为表单提交过来的是 字符串类型的
					String imgStr = item.getString();

					// base64解码并生成图片
					BASE64Decoder decoder = new BASE64Decoder();
					try {
						// Base64解码
						byte[] bytes = decoder.decodeBuffer(imgStr);
//                        for (int i = 0; i < bytes.length; ++i) {
//                            if (bytes[i] < 0) {// 调整异常数据
//                                bytes[i] += 256;
//                            }
//                        }
						// 生成jpeg图片
						OutputStream out = new FileOutputStream("d:/ceshi.jpg");
						out.write(bytes);
						out.flush();
						out.close();
					} catch (Exception e) {
						e.printStackTrace();
					}
					// request.setAttribute(name, value);
				} else {
					// 对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些
					/**
					 * 以下三步，主要获取 上传文件的名字
					 */
					// 获取路径名
					String value = item.getName();
					// 索引到最后一个反斜杠
					int start = value.lastIndexOf("\\");
					// 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
					String filename = value.substring(start + 1);
					// 将当前时间戳 作为的文件名
					String newfilename = Long.toString(new Date().getTime())
							+ filename.substring(filename.indexOf('.'));
					request.setAttribute(name, newfilename);

					// 真正写到磁盘上
					// 它抛出的异常 用exception 捕捉

					// item.write( new File(path,filename) );//第三方提供的

					// 手动写的
					OutputStream out = new FileOutputStream(new File(path, newfilename));

					InputStream in = item.getInputStream();

					int length = 0;
					byte[] buf = new byte[1024];

					System.out.println("获取上传文件的总共的容量：" + item.getSize());

					// in.read(buf) 每次读到的数据存放在 buf 数组中
					while ((length = in.read(buf)) != -1) {
						// 在 buf 数组中 取出数据 写到 （输出流）磁盘上
						out.write(buf, 0, length);
					}
					in.close();
					out.close();
				}
			}

		} catch (FileUploadException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		InputStream in = req.getInputStream();

		OutputStream out = null;

		UUID uuid = UUID.randomUUID();
		String filename = uuid.toString().replace("-", "") + ".jpg";

		String basepath = Global.getUploadPath();

		SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
		Date now = new Date();

		String s = simpleDateFormat.format(now);

		File f = new File(basepath + "\\prescription\\" + new SimpleDateFormat("yyyyMMdd").format(new Date()));

		if (!f.isDirectory())
			f.mkdirs();

		String path = f.getAbsolutePath() + "\\" + filename;

		out = new FileOutputStream(path);
		int c = 0;
		while ((c = in.read()) != -1) {
			out.write(c);
			out.flush();
		}

		in.close();
		out.close();

		PrintWriter outp = resp.getWriter();
		outp.write("\\profile\\upload\\prescription\\" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "\\"
				+ filename);
		outp.close();

	}

}