H5现在火爆了前端市场，尤其是在手机应用这块儿，那叫一个受欢迎。那么，怎么用好这个H5？首先得知道怎么用它调出手机里的相机。虽然觉得简单，其实挺麻烦的。比如说，一种叫`属性`的方法，在IOS设备上没啥问题，但在安卓机子上就容易出兼容性问题。因为在安卓上，用户点完后，相机、图库、文件管理器各种选项都冒出来，搞得人头大。
要搞定这个问题，我们得找别的招儿。也许可以试试用JavaScript动态控制相机，不过这得有点儿编程知识才行。别忘了，得照顾到用户的感受，让他们用起来舒服，一点儿也不费劲儿。
图片压缩的技术解析
搞定拍照后，我们来把拍好的照片压缩一下！其实这就像调皮捣蛋的小朋友玩陶泥一样——调整图片的分辨率和质量。在做这个事时，我会先设定图片最大边长为800像素，然后再保持其他部分按原画比缩小。这样处理，保证了图片的精美度不受太大影响。
除了看分辨率，图片质量也是要注意的！我每次都会把照片质量压缩到原图的80%，这样既能保持图像清晰又不至于文件太大。不过，千万别调得太狠，否则图片可能变形，那可就不好了。
//相机 //相册
图片转base64的方法
搞定了压缩图片以后，下一步就是把图片变成base64编码。这个步骤特别关键，因为通过这种方式，我们就可以把图片直接嵌在HTML或CSS里，不用再依赖外部文件，这样就能省去很多HTTP请求，提升网页加载速度，还能更好地管理图片！
把文件转成base64码的方法很容易，用JavaScript就行了。里边有个叫FileReader的东西，能帮我们异步读文件，然后再转code64码。虽然不难，但在整个流程里还是重要的一步~
H5调用相机和相册的兼容性问题
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获取
咱们在做项目时，总碰上一个让人头疼的问题，就是H5咋拍照这事儿。就像我刚说的，“属性用在安卓机子上，效果不好呀。
有个方法就是用第三方库，比如cordova-plugin-camera，它提供了一个通用的调用相机和相册的方法。但是，用这个库也得做好适配，保证每个设备都能用起来体验好！
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);
解决IOS图片旋转问题的策略
用H5拍照并压缩图后，在iOS设备上可能会发现图旋转了，为啥？原来iOS拍照时会记下方向，但压缩的时候容易丢或者被误解。
咱们要搞清图片的正反面，得用下个库叫`exif.js`！它专门用来读图中EXIF（数码照片的一些内部数据）信息的，尤其是方向这部分。然后用`EXIF.getData`和`EXIF.getTag`两个方法，就能把当时拍哪儿了搞清楚了。根据这个信息，咱们就可以给图片调整过来，保证看起来顺眼儿，不管你拿着什么牌子的手机。
完整代码示例和实战经验
//file通过input标签获取
EXIF.getData(file,function(){
orientation=EXIF.getTag(file,'Orientation');
});
看这儿！这里有段完整代码给你展示如何用H5让手机照相并压缩图片，顺便还能解决图片里EXIF信息和上传到服务器这两桩事儿。看完这段，以后就能搞定这项技术，用到自己的项目上也是分分钟的事儿。
实战经验可是值钱，能帮咱们在做项目时避开那些烦人的麻烦。希望看完这篇文章后，你能学到点实用的窍门，以后干活儿更顺手！
总的说来，用H5刷卡拍照片整合压缩图，这可是个挺难搞但是好用得不得了的功能。这样做既能让用户感觉更好，也可以大大提高网页速度。实现的时候可能会碰到点麻烦，但只要咱找到对路的方法，问题就都不是事儿！
最后给你问个问题哈：你看H5技术还有啥好玩儿的地方没被利用？随时来评论区聊聊；觉得这篇有用就给点个赞，分享出去让更多人看到。
switch (orientation) {
case 6:
case 8:
cvs.width = height;
cvs.height = width;
break;
}
var context=cvs.getContext("2d");
switch(orientation){
//iphone横屏拍摄，此时home键在左侧
case 3:
// 180度向左旋转
context.translate(width, height);
context.rotate(Math.PI);
break;
//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
case 6:
context.rotate(0.5 * Math.PI);
context.translate(0, -height);
break;
//iphone竖屏拍摄，此时home键在上方
case 8:
// 逆时针旋转90度
context.rotate(-0.5 * Math.PI);
context.translate(-width, 0);
break;
}
评论0