关于调用摄像头拍照的问题我找了半天，也研究了半天，也没有满意的解决方案。说说我遇到的问题吧，相信大部分app会遇到，就是上传头像！
上传头像选择拍照，会有两个问题:
1，照片很大，好几兆，这个肯定不行。我暂时解决方法，用base64压缩可以达到500k。但有很多坑：老版本安卓浏览器只能压缩成png格式，依赖于浏览器内核，这样一来兼容性就不好了，商用的话有点勉强。希望官方能出一个原生插件和演示。
2，有的手机拍照图片会旋转90°，这个貌似也可以用html5修正，但这方面资源实在太少了，我至今没有找到好的方法。看了很多其他人的回答也基本上效果不理想。我还是希望能出原生插件来修正摄像头旋转问题。
如果照相和压缩上传功能加入h5+逼格不够高的话，加到mui也行啊。我觉得大多数app都会用到上传照片功能，既然大多数人的需求，那么就是官方的需求,那么就很有必要做成一个插件，免得大家重复造轮子。
最后，感谢官方的努力，希望你们越做越好，这个框架以后会非常火的，基础功能慢慢完善吧！
我们需要更多的原!生!插!件!
枫桥居APP
- 发布：2015-03-31 00:13
- 更新：2017-09-24 12:42
- 阅读：7457
最佳回复
目前HTML5+已经在plus.zip里提供了compressImage的原生图像压缩。
具体见：http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage
或
http://ask.dcloud.net.cn/article/123
旋转问题楼下回复有很多解决方案。
对于iphone5+上拍照旋转的问题，经过长时间的查找，总算找到了一个比较简洁的解决方案，供各位参考：
- 从网上找到mobileBUGFix.mini.js和exif.js，并下载在本项目工程的js目录下
- 在需要调用拍照功能的某个HTML页面中引入这两个js文件，比如： <script type="text/javascript" src="../js/mobileBUGFix.mini.js" ></script> <script type="text/javascript" src="../js/exif.js" ></script>，您可能要判断清楚该HTML文件目录位置与js目录位置的关系，来决定写成 src="../js/mobileBUGFix.mini.js"还是src="./js/mobileBUGFix.mini.js"，甚至别的路径描述。
- 在该页面上添加“拍照”按钮和显示图片的img控件，比如：<span id='photo' style='font-size:20px' >拍照</span> <img id='myphoto' style='width:100%' src='a' class='photo' />
- 同时添加一个隐藏的file控件和一个隐藏的canvas控件，比如：<input type='file' accept='image/*' id='uploadImage' style='display:none' capture="camera" onchange="selectFileImage(this);" /> <canvas id='mycanvas' style='display:none;' ></canvas>
- 然后指定在用户点击“拍照”按钮后，系统会直接点击上述隐藏的file控件，比如：$("#photo").click(function(){$("#uploadImage").click();});
- 在该file控件的onchange响应函数selectFileImage(this)中来对拍摄到的图片，或者选择到的图片进行判断，如发现图片确实是旋转了90度，那么就调用MegaPixImage对象的render函数进行纠正，比如： function selectFileImage(fileObj) { var file = fileObj.files['0']; var Orientation = null; if (file) { var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
alert("请选择jpeg、png格式的图片");
return;
}
//获取照片方向角属性，用户旋转控制
EXIF.getData(file, function() {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
var oReader = new FileReader();
oReader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var base64 = null;
var mpImg = new MegaPixImage(image);
mpImg.render(canvas, {
maxWidth: expectWidth,
maxHeight: expectHeight,
quality: 0.8,
orientation: Orientation
});
base64 = canvas.toDataURL("image/jpeg", 0.8);
$("#myphoto").attr("src", base64);
};
};
oReader.readAsDataURL(file); }); } } - 最后要感谢提供这两个js文件的大牛们，也希望Hbuilder这个开发工具平台今后有可能把这种共性的问题修复代码直接集成在新版本中，让产品经理和工程师们能把精力关注在业务设计开发上，不对之处，请大家指正。
建议添加官方插件。我遇到这问题，也花了不少时间，前端压缩方案不是很理想，在不同设备上效果不一样。我在iphone4s测试压缩在可以，在iphone5c压缩丢失部分数据（拍照图片达10几兆，ios上对前端压缩有时间限制）。
我 用的三星gt-i9000和gt-i9200，手机拍照时的方向会影响拍照获取到的图片方向，只有一个方向得到的图片是正的，其他方向都会发生响应角度的旋转，90、280、270度都有，摄像头看到的都是正的
还是有一个问题，如果我想通过input file控件直接调用摄像头拍摄出照片，然后想直接显示在页面上的时候，就想不明白如何利用plus.zip.compressImage去旋转该照片了，似乎原理上来看可以先把照片保存为临时jpg文件，然后再旋转，然后上传到服务器上，但是如何能一次性更新显示当前页面上图像为正确的方位呢？ 真是被这个问题折磨得死去活来了，快3个月都没找到彻底解决办法，脑子生锈了。
官方有没有可能再统一封装一个API，就是可以直接读取input file控件输出的fileobj对象内容，然后判断拍到的照片已经旋转的角度，直接把它修正好，然后输出成DataURL的格式，这样大家就不会再蛋疼吧。
感觉上这种共性问题很适合开发工具提供方统一解决了，这样用户会越来越多，这样比增加更多新功能都更紧急，实话来讲，这种功能让我支付点报酬都是愿意的，有点说大了可能，抱歉。
继续讨论下这个照片旋转的问题，我的想法是既然Hbuilder的使命是希望让它成为HTML5时代的最受大众喜欢的开发工具，那么就可以考虑如何解决这种共性的问题，让我这种入门级开发爱好者能节约时间，更加聚焦在应用系统本身的设计上。
如果Hbuilder团队由于资源精力的问题，无暇顾及这种小问题的解决的话，那么有没有可能公开招募那些已经解决个这类问题的用户来封装出一个专门的API，集成在下一版中？ 至于费用的问题，可以考虑一些新的玩法，比如可以在本网站首页开辟一个专门区域，罗列出收集到的全部共性问题，然后用户可以根据自己的情况，选择支付部分费用，最低10元，赠送多少积分，付费更多的时候，赠送更多积分等，然后有解决方案的人可以竞拍，如果代码被审核通过，那么就得到部分费用，多余的费用可以保存在推广支持的基金里。Hbuilder团队的专家可以提供更高级的培训，咨询等服务，中国人原创一个能普及的开发工具不容易，大家可以集思广益，看如何来从细节问题入手，让每个用户用得更加得心应手。
我的判断是在移动互联网时代，传统的那种卖软件license方式更加没市场空间了，绝大部分软件包括开发工具可能都只能免费，因为如果你不免费，就有可能有另外一帮人提供一个免费的，甚至长期来看更好的类似软件/工具，但是开发一个软件又是要投入的，解决这个问题的一条途径可能就是借助于庞大的用户群基数，把选择决策权力交还给大家，资源众筹一些资金，只要是方向正确，热情用户越来越多的话，那么就有机会逐步地解决所有发现的痛点。
另外一个相关的想法是使用JS开发应用系统，已经可以做到前后端代码几乎统一了，并且后端可以全部使用免费开源系统，因此将来能掌握这种开发技能的人会更多，相应地，其中有大部分人可能会期望Hbuilder这种开发工具能变得更加傻瓜化使用，提供更多封装好的API，用户就能更聚焦在自己的业务逻辑上。
其实最近半年多的使用经验来看，还是能发现更多的改进机会点的，比如JS代码混淆，我的理解是这应该成为Hbuilder的一个基本功能，集成在打包发行功能中，这样保证每个开发者发布的JS代码是经过了基本的混淆的，打消大家对于特色设计保护的顾虑，考虑下来，这个混淆功能没必要做得太复杂，就是把工程里的所有目录和代码拷贝到发行目录下，然后其中每个JS文件中的注释内容去掉，换行符号，空格等去掉，把var 变量替换成不容易理解猜测的数字变量，可能就差不多了，比如以首字母+数字顺序号的方式来替换，然后对于每个JS文件都单独做混淆。
-
图片旋转是bug，在哪部手机上有问题，请直接报就好了。js混淆，在HBuilder的插件里有一个插件，但目前大部分用户是用glup来处理的。
2016-01-27 07:14
-
-
官方能帮忙回复下吗？如果确认是一个BUG的话，那么我感觉总得要有个说法和计划，对吧，否则大家怎么可能真的推广使用这个开发平台呢？有点不明白现在Hbuilder的开发关注重点，本以为应该是优先解决用户发现的问题。
如果等微信的应用号都开始推广的时候，那么个人感觉你们的流应用平台也不一定好去抗衡啊，这么多的问题没有人来关注及时答复，人家可是多少研发资源去搞。
我解决了，用本调用解决的，首页本地写一个获取图片旋转角度的方法：
public static int getExifOrientation(String filepath) {
if(filepath != null) filepath = filepath.replace("file://", "");
int degree = 0;
ExifInterface exif = null;
try {
exif = new ExifInterface(filepath);
} catch (IOException ex) {
ex.printStackTrace();
}
if (exif != null) {
int orientation = exif.getAttributeInt(ExifInterface.TAG_ORIENTATION, -1);
if (orientation != -1) {
switch (orientation) {
case ExifInterface.ORIENTATION_ROTATE_90:
degree = 90;
break;
case ExifInterface.ORIENTATION_ROTATE_180:
degree = 180;
break;
case ExifInterface.ORIENTATION_ROTATE_270:
degree = 270;
break;
}
}
}
return degree;
}
然后mui里面调用：
//Android判断图片旋转
var rotate = 0;
if(plus.os.name == 'Android'){
var Utils = plus.android.importClass("com.app.logistics.common.Utils");
var rotate = Utils.getExifOrientation(pth);
console.log("图片旋转角度=========>" + rotate);
}
然后用plus io里面的压缩可以旋转图片的： rotate: rotate
var conf = {
src: pth,
dst: newImgSrc,
//dst:pth,
//overwrite:true,
quality: itool.options.ZoomQuality,
rotate: rotate
};
//不再判断横图和竖图
conf['width'] = itool.options.ZoomBox + 'px';
plus.zip.compressImage(conf, function(data) {
cb(false, data.target);
}, function(err) {
cb(err.message, pth);
});
枫桥居APP (作者)
谢谢,非常有帮助
2015-07-29 14:34
超人爷爷
照片旋转问题 能加到5+的Camera里吗。
2016-05-09 16:15