H5下拍照上传图片的一些tips

1. 使用file input进行图片上传

<input type="file" accept="image/*" />,点击后在H5浏览器中可以调起浏览器的 “拍照”或者“从图库中选择图片”的菜单列表。

 multiple="multiple" 属性可以使input支持多张图片的上传，此时点击input，菜单列表中只会出现 “选择图片”一项，可以同时对图片进行多选并确认上传 

multiple属性在ios下测试支持，但在android下，并没有被完全支持，现在发现某些android机型（如华为）的图片app不支持多选功能，导致该multiple属性无法生效。

2. File API

主要有File List来表述任何<input type='file'>里的对象，File继承于Blob父类。

File表述一个<input type=file>里的文件对象。

注意，这里的File似乎必须是来自于用户输入，暂时没有找到凭空构造的方式。

我尝试了在将图片以二进制码的格式进行旋转后绘制到canvas中，从canvas中读取旋转后的图片二进制重新构建一个File对象进行上传，

var src = [];
src.push(canvas.toDataURL("image/jpeg"));
src[0] = src[0].split("data:image/jpeg;base64,")[1];
var myFile = new File(src, images[0].name ,{ "type" : "image/jpeg" });

此时，用构造出来的File对象上传时，接口提示 “文件格式不正确”，同时文件的大小也与原始的File相差较大，暂不确定哪里出了问题。

使用FileReader()读写类，对File进行读写, http://www.w3.org/TR/FileAPI/#readAsDataURL

比较有用的操作为将File或Blob对象读写成为BASE64编码的DataURL，readAsText()，以及readAsArrayBuffer()，

3. URL API

http://www.w3.org/TR/FileAPI/#url

var url= (window.URL || window.webkitURL).createObjectURL(input.files[i]);
console.log(url);

输出为：blob:xxxx-xxx-xxx--xxx#frament...

就是可以使用File API中的FileReader()类，将文件或二进制的大块Blob，readAsDataURL，然后赋值给 img src或其他。也可以将blob转储为BLOB URL，官方的表述即ObjectURL

4. 拍照上传时的图片方向问题

 在开发H5发表评价时上传图片的功能时，发现当使用file input进行拍照上传时，会发生上传后的图片方向与拍照后预览的图片方向不一致的情况。

该现象是因为手机拍摄的照片会以拍摄时的原始方向来保存，而预览时会根据照片EXIF信息中的方向信息进行旋转后展示，所以上传的图片其实是原始图片的方向，那此时如果要在页面上对上传的照片进行预览，就需要对照片进行旋转。

4.1 EXIF

EXIF 全称(Exchangeable Image File Format) 

图像一般都由两大部分组成，一部分是数据本身，它记录了每个像素的颜色值，另外一部分是文件头，这里面记录着形如图像的宽度，高度等信息。我们所讨论的方向信息便是被存储于文件头中。更为具体一些：EXIF中，维基百科上对其的解释为：

可交换图像文件格式常被简称为Exif（Exchangeable image file format），是专门为数码相机的照片设定的，可以记录数码照片的属性信息和拍摄数据… Exif可以附加于JPEG、TIFF、RIFF等文件之中

注意：PNG格式的图像中不包含。

4.2 Orientation

在EXIF涵盖的各种信息之中，其中有一个叫做Orientation (rotation)的标签，用于记录图像的方向，这便是相机写入方向信息的最终位置。它总共定义了八个值：

这边的orientation的值是相机在拍照时通过传感器记录下的方向信息，每个orientation的值对应的是一组方向的变换，row #0 一列表示原始图片的上边框旋转后对应图片的某一边，coloum #0 一列表示原始图片的左侧边框旋转后对应到图片的某一边。

以下是四个方向分别对应的orientation的值及转换完的方向：

5. 图片进行旋转并绘制预览

通过exif.js获取图片的EXIF信息，根据获取到的图片的旋转方向，通过megapix-image.js旋转图片。

exif.js:  http://code.ciaoca.com/javascript/exif-js/

megapix-image.js:  https://github.com/stomita/ios-imagefile-megapixel

fileInput.on("change",function(evt){
	var input = evt.target;
	var imgSrc = (window.URL || window.webkitURL).createObjectURL(input.files[0]);
	var file = input.files[0];
	
	EXIF.getData(file , function() {            
		var orientation = EXIF.getTag(this,'Orientation');
		var canvas = document.createElement("canvas");
		var mpImg = new MegaPixImage(file );
		mpImg.render(canvas, {orientation: orientation },function(){
        	//other operations after render to canvas
		});
	});
}

---

参考资料：

http://www.imooc.com/wenda/detail/266312

http://feihu.me/blog/2015/how-to-handle-image-orientation-on-iOS/

http://javascript.ruanyifeng.com/htmlapi/file.html