HTML5手机端拍照上传
最近在尝试做手机端拍照上传的项目，之前用微信JS-SDK 发现有时候上传照片会有问题，下载后的照片只有一半。所以改用了HTML5上传，在做这一点上传中也学习了一下JS和HTML5的一些标签。记录一下。
首先需要在页面添加HTML5控件 capture="camera" 这样就可以在android5.0 或则 IOS 9.0 以上直接拉起照相机，但是这些版本之下的手机只能调用相册选择
另外需要添加3个js控件
//图片上传校验
//照相后自动旋转 这个很有用
//正在上传的遮盖层打开摄像头代码如下
//拍照
function cameraImg() {
document.getElementById("imgcamera").value = ""; //上传文件时先把file类型input清空下
$("input[id='imgcamera']").click();
}拍照后图片处理代码如下，主要是先做图片旋转，有些手机拍照后显示图片是偏转的，需要自己先调整正确角度，在进行图片缩放，最后是压缩处理。
function ImgChange(imgdata) {
var _this = imgdata,
_file = _this.files[0],
fileType = _file.type;
console.log(_file.size);
//图片方向角 added by lzk
var Orientation = "";
if (/image\/\w+/.test(fileType)) {
EXIF.getData(_file, function () {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
var fileReader = new FileReader();
fileReader.readAsDataURL(_file);
fileReader.onload = function (event) {
var result = event.target.result; //返回的dataURL
var image = new Image();
image.src = result;
image.onload = function () { //创建一个image对象，给canvas绘制使用
var cvs = document.createElement('canvas');
var scale = 1;
if (this.width > 1080 || this.height > 1080) { //1080只是示例，可以根据具体的要求去设定缩放图片大小
if (this.width > this.height) {
scale = 1080 / this.width;
} else {
scale = 1080 / this.height;
}
}
cvs.width = this.width * scale;
cvs.height = this.height * scale; //计算等比缩小后图片宽高
var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
var imgtmp = new Image();
imgtmp.src = cvs.toDataURL(fileType, 0.8);
imgtmp.onload = function () {
var cvstmp = document.createElement('canvas');
var isori = false;
if (Orientation != "" && Orientation != 1) {
//alert('旋转处理' + Orientation);
switch (Orientation) {
case 6://需要顺时针（向左）90度旋转
//alert('需要顺时针（向左）90度旋转');
isori = true;
rotateImg(this, 'left', cvstmp);
break;
case 8://需要逆时针（向右）90度旋转
//alert('需要顺时针（向右）90度旋转');
rotateImg(this, 'right', cvstmp);
isori = true;
break;
case 3://需要180度旋转
//alert('需要180度旋转');
rotateImg(this, 'right', cvstmp);//转两次
rotateImg(this, 'right', cvstmp);
isori = true;
break;
}
}
var newImageData;
if (isori)
newImageData = cvstmp.toDataURL(fileType, 0.8); //重新生成图片，fileType为用户选择的图片类型
else
newImageData = imgtmp.src;
var sendData = newImageData.replace("data:" + fileType + ";base64,", '');
$("#img" + imageType1).attr("src", newImageData); //显示图片
var md5str = hex_md5(sendData); //MD5校验
uploadImages(sendData, md5str);
}
}
}
} else {
alert("图片类型不正确");
}
}选择图片的代码如下
function rotateImg(img, direction, canvas) {
//alert(img);
//最小与最大旋转方向，图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == undefined) return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.height;
var width = img.width;
var step = 2;
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
var ctx = canvas.getContext('2d');
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
return ctx;
}最后是上传服务器的代码
//将图片上传的服务器本地
function uploadImages(localData, md5str) {
var xval = getBusyOverlay('viewport', {
color: 'white',
opacity: 0.75,
text: 'viewport: loading...',
style: 'text-shadow: 0 0 3px black;font-weight:bold;font-size:16px;color:white'
}, {color: '#ff0', size: 100, type: 'o'});
$.ajax({
type: "POST",
url: "",
beforeSend: function () {
if (xval) {
xval.settext("正在上传图片，请稍后......");//此处可以修改默认文字，此处不写的话，就按照默认文字来。
}
},
data: {
localData: localData,
md5str: md5str
},
dataType: "json",
timeout: 120000, //超时时间：120秒
success: function (data) {
xval.remove(); //此处是移除遮罩层
if (data.result == 1) {
alert("上传成功！");
} else {
alert("上传失败！");
}
}, error: function (XMLHttpRequest, textStatus, errorThrown) {
xval.remove(); //此处是移除遮罩层
alert("上传失败！");
}
});
}后台代码就不贴出来了可以使用各种语音接收，由于初次接触html5 所以代码写的比较乱。如有不对希望大家指正。