说到H5调用相机，就直接来个input标签，添上type=”file”和accept=”image/*”capture=”camera”这几个属性就行。这么一点，相机就弹出来可以拍照咯。不过得提醒你，这个方法在安卓手机上可能会有点小麻烦，有时候点击后会出现一堆相机、图库、文件管理器之类的选项，让人晕头转向。
实操时咱得想想兼容性的事。首先，iPhone上这招挺给力的，但到了安卓就有些坎儿了。找来找去，也没啥靠谱的法子，只能硬着头皮继续琢磨。毕竟，咱们的初衷就是让大家拍完照就能顺顺利利地上传！
图片压缩的技术细节
想压缩图片？就得靠咱们的FileReader和canvas！FileReader能帮我们同步读取图片，而canvas就是那个能在网页上画图的小能手。有了它们俩，我们就能调整图片的分辨率和质量。比如说，把图片的最大边设成800像素，然后按比例缩小，这样既不占空间，也能保持图片的清晰度。
在压缩图片时，我们尽量保持在原始大小的80%左右。不然，压缩过头的话，图片就会变得模糊，影响视觉效果。所以，要掌握好这个平衡点，既不让图片过大，又不能让它模糊不清。
图片转base64的步骤
为什么要把图片变成base64编码？原因就两点，一个是方便看图，另一个就是省事儿。你想想，直接传文件多费劲，但如果把图片变成base64编码，就能直接插进HTML文档里，上传起来就轻松多了。这操作其实挺简单的，就是先用FileReader读出图片，再在canvas上画出来，最后把画好的图片转成base64编码就搞定！
//相机 //相册
用www.base64img.com把图片转换为base64编码，然后用AJAX就能轻松传给服务器！服务器收到后就可以直接处理这些图片了。不过，上传时可能会碰到一些小麻烦，比如图片旋转的问题，咱们后面再慢慢聊哈。
H5调用相册的方法
要在手机上选图，不一定非要照相才行，其实你只要把“Capture”那玩意儿给去了，换成和照相机那个类似的input标签就搞定！点一下就能看到相册，随心所欲地挑照片！
选相册也挺费劲儿的！有的手机里，相册界面看着有点乱乱的，找东西可能得花点时间。所以设计时要注重用户体验，让界面简洁易懂，让大家用起来更舒坦。
解决IOS图片旋转问题
var MAX_WH=800;
var image=new Image();
image.onload=function () {
if(image.height > MAX_WH) {
// 宽度等比例缩放 *=
image.width *= MAX_WH/ image.height;
image.height = MAX_WH;
}
if(image.width > MAX_WH) {
// 宽度等比例缩放 *=
image.height *= MAX_WH/ image.width;
image.width = MAX_WH;
}
}
image.src=dataURL;//dataURL通过FileReader获取
说起让照片翻转这个难题，真是让人头疼！特别是在iPhone上，拍完照压缩后，有时照片就会突然翻个跟头，要么90度，要么180度。这可真让人抓狂。别怕，我这儿有妙招儿。
首先，咱们需要用个叫做exif.js的小工具来了解一下照片的角度。然后，咱们就可以根据这些信息对照片做调整，保证传上去以后不会乱转！
上传图片到服务器的流程
var quality=80;
var cvs = document.createElement('canvas');
cvs.width = image.width;
cvs.heigh = image.height;
var context=cvs.getContext("2d");
context.drawImage(image, 0, 0,image.width, image.height);
dataURL = cvs.toDataURL('image/jpeg', quality/100);
图片经过加工后，接下来就是要上传到服务器！整个过程并不难懂，简单来说就是通过AJAX把图片传给服务器，接着等待服务器告诉你处理结果就行。不过，上传途中可能会有些小状况发生，比如网络不稳导致上传失败之类，所以我们得在代码里加入处理这些错误的逻辑，以确保上传过程能够顺利进行。
传上去以后，服务器会告诉你有什么事。这样就能看到页面上的相关信息，比如识别成功的话，地图就能出现；识别失败的话，它会提醒你再传个图给它试试看。
实战案例分享
最后来说说我之前做过的一个小项目。当时我用H5做了个页面，用户可以选择拍照或从手机里挑照片，然后再把这些图片压缩成base64格式传给服务器。服务器收到后就会告诉你识别出来的东西是什么。虽然这个过程有点麻烦，但是只要耐心点，慢慢来，肯定能完成的。
在这过程里，碰到挺多麻烦事儿，像什么兼容啊、图片转来转去啥的。但坚持研究和调整后，总算是搞定了。希望我的经历能帮到大家！
//file通过input标签获取
EXIF.getData(file,function(){
orientation=EXIF.getTag(file,'Orientation');
});
评论0