h5实现拍照上传
ajax、h5实现拍照上传图片
我对h5垂涎已久，最近终于接了一个和h5相关的项目如题，很兴奋但又不知道如可下手，按照毛主席的教导：战略上藐视它，战术上重视它，于是乎baidu了下，看上去很简单，直接用<input type='file'>搞定，目前支持ios chrome等主流浏览器，但是webview 不支持 ，需要另行开发，由于工期只能妥协调用原生的拍照功能，但是还想尝试用h5实现，希望有大咖支招，感激不尽。
效果图：
jquery代码显示：
$("input[type='file']").on('change', function () {
var self = this;
var fileName = $(this).attr("name");
var file = self.files[0];
var r = new FileReader();//图片读取
r.readAsDataURL(file);
$(r).load(function () {
var fileStream = this.result;//base64图片流 格式：data:image/jpeg;base64,/9j/4A.....
fileStream = fileStream.substr(23);
$.post('uploadImg',{file:fileStrem,fileName:fileName},function(){....})//上传图片
});
});
此时上传图片的功能就完成了，此时有个问题，大照片回显的比较慢，需要对图片进行压缩，这是就用到了canvas
var URL = window.URL || window.webkitURL,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
if (URL && File && ctx) {
var fileURL = URL.createObjectURL(file),
img = new Image();
img.src = fileURL;
img.onload = function () {
var degree = 0, drawWidth = img.width, drawHeight = img.height, width, height;
//以下改变一下图片大小
var maxSide = Math.max(drawWidth, drawHeight);
var tarSize = 1024;
if (maxSide > tarSize) {
var minSide = Math.min(drawWidth, drawHeight);
minSide = minSide / maxSide * tarSize;
maxSide = tarSize;
if (drawWidth > drawHeight) {
drawWidth = maxSide;
drawHeight = minSide;
} else {
drawWidth = minSide;
drawHeight = maxSide;
}
}
canvas.width = width = drawWidth;
canvas.height = height = drawHeight;
ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
var base64 = canvas.toDataURL('image/jpeg');
//上传图片
uploadFile //;
canvas = null;
img = null;}这时候就生成了一个比较小的图片，回显速度是可以接受的，这时又发现了一个问题，图片方向不对，竖拍的照片回显成横向，百度到EXIF可以解决这个问题，这时js代码全部完成：
$("input[type='file']").on('change', function () {
var self = this;
var fileName = $(this).attr("name");
var file = self.files[0];
var r = new FileReader();
r.readAsDataURL(file);
$(r).load(function () {
var fileStream = this.result;//base64图片流
var URL = window.URL || window.webkitURL,
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
if (URL && File && ctx) {
var fileURL = URL.createObjectURL(file),
img = new Image();
img.src = fileURL;
img.onload = function () {
var orientation;
EXIF.getData(img, function () {
orientation = EXIF.getTag(this, "Orientation");
var degree = 0, drawWidth = img.width, drawHeight = img.height, width, height;
//以下改变一下图片大小
var maxSide = Math.max(drawWidth, drawHeight);
var tarSize = 80;
if (maxSide > tarSize) {
var minSide = Math.min(drawWidth, drawHeight);
minSide = minSide / maxSide * tarSize;
maxSide = tarSize;
if (drawWidth > drawHeight) {
drawWidth = maxSide;
drawHeight = minSide;
} else {
drawWidth = minSide;
drawHeight = maxSide;
}
}
canvas.width = width = drawWidth;
canvas.height = height = drawHeight;
switch (orientation) {//横屏竖屏转化
//横屏拍摄，此时home键在左侧
case 3:
degree = 180;
drawWidth = -width;
drawHeight = -height;
break;
//竖屏拍摄，此时home键在下方(正常拿手机的方向)
case 6:
canvas.width = height;
canvas.height = width;
degree = 90;
drawWidth = width;
drawHeight = -height;
break;
//竖屏拍摄，此时home键在上方
case 8:
canvas.width = height;
canvas.height = width;
degree = 270;
drawWidth = -width;
drawHeight = height;
break;
}
//使用canvas旋转校正
ctx.rotate(degree * Math.PI / 180);
ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
var base64 = canvas.toDataURL('image/jpeg');
//上传图片
uploadFile(fileName, base64, fileStream);
canvas = null;
img = null;
});
}
} else {
uploadFile(fileName, fileStream, fileStream);
}
});
});
后台是用springmvc实现的：
//这里需要注意的是如果base64太大收到的参数为null,这是需要设置一下tomcat post 的maxpostsize ,在setting.xml 中：
//<Connector port="8080" protocol="HTTP/1 connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0"/>
@RequestMapping(value = "/uploadBase64", method = RequestMethod.POST)
@ResponseBody
public String uploadBase64(@RequestParam String base64,@RequestParam String fileName) {
Result<String> result = new Result<String>();
FileOutputStream write = null;
}
try {
BASE64Decoder decoder = new BASE64Decoder();
String path = TcwUtil.getProperty("neteaseImg") + clientId;
File fileFolder = new File(path);
if (!fileFolder.exists()) {
fileFolder.mkdirs();
}
File file1 = new File(path + File.separator + fileName);
write = new FileOutputStream(file1);
//Base64解码
byte[] decoderBytes = decoder.decodeBuffer(fileDate.toString());
write.write(decoderBytes);
write.flush();
new ThumbnailsThread(path + File.separator + fileName, path + File.separator, fileName).start();
result.setRtnEnum(RtnEnum.Success);
} catch (FileNotFoundException e) {
e.printStackTrace();
result.setReturnMsg(e.toString());
} catch (IOException e) {
e.printStackTrace();
result.setReturnMsg(e.toString());
} finally {
try {
write.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return JSONUtil.toJson(result);
}
这样就完成了springmvc+h5+ajax上传图片，一切的一切都只是抛砖引玉，请大咖们多指教。