jquery 上传图片 java_jquery webcam + java服务拍照上传实例

前端关键代码：

//自定义样式

#webcam { border: 1px solid #666666; width: 320px; height: 240px; }

#photos { border: 1px solid #666666; width: 320px; height: 240px; }

.btn { width: 320px; height: auto; margin: 5px 0px; }

.btn input[type=button] { width: 150px; height: 50px; line-height: 50px; margin: 3px; }

//展示内容

    

//js

$(function () {

var w = 320, h = 240;

var pos = 0, ctx = null, saveCB, image = [];

var canvas = document.createElement("canvas");

canvas.setAttribute('width', w);

canvas.setAttribute('height', h);

console.log(canvas.toDataURL);

if (canvas.toDataURL) {

ctx = canvas.getContext("2d");

image = ctx.getImageData(0, 0, w, h);

saveCB = function(data) {

var col = data.split(";");

var img = image;

for(var i = 0; 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 * w * h) {

ctx.putImageData(img, 0, 0);

$.post("${ctx}/common/webcam/uploadPhoto", {type: "data", image: canvas.toDataURL("image/png")}, function(msg){

console.log(msg);

pos = 0;

$("#img").attr("src", "${ctx}/"+msg);

});

}

};

} else {

saveCB = function(data) {

image.push(data);

pos+= 4 * w;

if (pos >= 4 * w * h) {

$.post("${ctx}/common/webcam/uploadPhoto", {type: "pixel", image: image.join('|')}, function(msg){

console.log(msg);

pos = 0;

$("#img").attr("src", "${ctx}/"+msg);

});

}

};

}

$("#webcam").webcam({

width: w,

height: h,

mode: "callback",

swffile: "${ctxStatic }/jquery-plugin/jscam_canvas_only.swf",

onSave: saveCB,

onCapture: function () {

webcam.save();

},

debug: function (type, string) {

console.log(type + ": " + string);

}

});

});

//拍照

function savePhoto(){

webcam.capture();

}

java后端代码：

/**

* 功能描述：拍照并上传图片

*

* @since 2016/5/24

*/

@RequestMapping(value = "/uploadPhoto")

public void uploadPhoto(HttpServletRequest req, HttpServletResponse resp) throws BusinessException {

String basePath = "upload/" + DateUtils.getDate("yyyyMMdd") + "/";

String filePath = req.getSession().getServletContext().getRealPath("/") + basePath;

String fileName = DateUtils.getDate("yyyyMMddHHmmss") + ".png";

//默认传入的参数带类型等参数：data:image/png;base64,

String imgStr = req.getParameter("image");

if (null != imgStr) {

imgStr = imgStr.substring(imgStr.indexOf(",") + 1);

}

Boolean flag = GenerateImage(imgStr, filePath, fileName);

String result = "";

if (flag) {

result = basePath + fileName;

}

this.writeJson(result, resp);

}

/**

* 功能描述：base64字符串转换成图片

*

* @since 2016/5/24

*/

public boolean GenerateImage(String imgStr, String filePath, String fileName) {

try {

if (imgStr == null) {

return false;

}

BASE64Decoder decoder = new BASE64Decoder();

//Base64解码

byte[] b = decoder.decodeBuffer(imgStr);

//如果目录不存在，则创建

File file = new File(filePath);

if (!file.exists()) {

file.mkdirs();

}

//生成图片

OutputStream out = new FileOutputStream(filePath + fileName);

out.write(b);

out.flush();

out.close();

return true;

} catch (Exception e) {

logger.error("生成图片异常：{}", e.getMessage());

return false;

}

}

参考文章：