canvas java 上传截图_canvas 画图 并上传到服务器

前端通过canvas获取摄像头图像,利用toBlob转换为blob对象并使用ajax上传。后端java通过Servlet接收文件,将文件保存到服务器,并返回文件路径。涉及到的技术包括canvas、xhr、Servlet、文件上传。
摘要由CSDN通过智能技术生成

前端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('

'+xhr.responseText+'

删除

');

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 list = (List) 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();

}

}

标签:canvas,java,String,request,画图,new,import,服务器,out

来源: https://blog.csdn.net/az44yao/article/details/100625191

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java中的Canvas绘图源码实例,主要是画线条、弧线、圆角矩形、三角形、文字、圆形等简单的几何图形,主要是通过创建DrawingCanvas对象canvas,为canvas设置命令监听者,实现接口CommandListener的方法,把缓冲区图像的内容绘制到画布上,画图部分代码:   int w = getWidth(); // 画布的宽度   int h = getHeight(); // 画布的高度   Image buffer = Image.createImage(w, h); // 用于绘图的缓冲图像   Graphics gc = buffer.getGraphics(); // 获取缓冲图像的图形环境   // 清除画布   public void clearScreen() {    gc.setColor(255,255,255); // 设置绘图颜色为白色    gc.fillRect(0,0,w,h); // 把缓冲图像填充为白色    gc.setColor(255,0,0); // 设置绘图颜色为红色   }   // 绘制直线   public void drawLine() {    setTitle("直线"); // 设置画布的标题    clearScreen(); // 清除画布    gc.drawLine(10,10,w-20,h-20); // 绘制黑色直线    gc.setColor(0,0,255); // 设置绘图颜色为蓝色    gc.drawLine(10,h/2,w-10,h/2); // 绘制蓝色直线   }   // 绘制弧   public void drawArc() {    setTitle("弧线和填充弧");    clearScreen();    gc.drawArc(5,5,w/2-20,h/2-20,60,216); // 绘制弧线    gc.drawArc(5,h/2-10,w/2-20,h/2-20,0,360); // 绘制圆    gc.setColor(0,0,255);    gc.fillArc(w/2,5,w/2-20,h/2-20,60,216); // 绘制填充弧线    gc.fillArc(w/2,h/2-10,w/2-20,h/2-20,0,360); // 绘制填充圆   }   // 绘制矩形   public void drawRect() {    setTitle("矩形和填充矩形");    clearScreen();    gc.drawRect(25,25,w/2-30,h/2-30); // 绘制矩形    gc.fillRect(w/2 25,25,w/2-30,h/2-30); // 绘制填充矩形   }   // 绘制圆角矩形   public void drawRoundRect() {    setTitle("圆角矩形和填充圆角矩形");    clearScreen();    gc.drawRoundRect(5,5,w-5-30,h/2-30,20,20); // 绘制圆角矩形    gc.setColor(0,0,255);    gc.fillRoundRect(5,h/2,w-30,h/2-30,20,20); // 绘制填充圆角矩形   }   // 绘制三角形   public void drawTriangle() {    setTitle("填充三角形");    clearScreen();    gc.fillTriangle(w/2, h/6, w/6, h/2, w/2, h/2);   }   // 绘制文字   public void drawText() {    setTitle("文字"); //设置标题    clearScreen();    gc.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD,Font.SIZE_SMALL)); // 设置字体    gc.drawString("Hello World!",0,0,gc.TOP|gc.LEFT); // 使用当前字体绘制文字    gc.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD|Font.STYLE_UNDERLINED,Font.SIZE_LARGE));    gc.drawString("Hello
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值