canvas 画图 并上传到服务器

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:47   3043   0

前端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();

 }

}

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP