枫桥居APP
枫桥居APP
  • 发布:2015-03-31 00:13
  • 更新:2017-09-24 12:42
  • 阅读:5860

调用摄像头拍照压缩和方向修正插件官方啥时候出

分类:5+ SDK

关于调用摄像头拍照的问题我找了半天,也研究了半天,也没有满意的解决方案。说说我遇到的问题吧,相信大部分app会遇到,就是上传头像!
上传头像选择拍照,会有两个问题:
1,照片很大,好几兆,这个肯定不行。我暂时解决方法,用base64压缩可以达到500k。但有很多坑:老版本安卓浏览器只能压缩成png格式,依赖于浏览器内核,这样一来兼容性就不好了,商用的话有点勉强。希望官方能出一个原生插件和演示
2,有的手机拍照图片会旋转90°,这个貌似也可以用html5修正,但这方面资源实在太少了,我至今没有找到好的方法。看了很多其他人的回答也基本上效果不理想。我还是希望能出原生插件来修正摄像头旋转问题
如果照相和压缩上传功能加入h5+逼格不够高的话,加到mui也行啊。我觉得大多数app都会用到上传照片功能,既然大多数人的需求,那么就是官方的需求,那么就很有必要做成一个插件,免得大家重复造轮子。
最后,感谢官方的努力,希望你们越做越好,这个框架以后会非常火的,基础功能慢慢完善吧!
我们需要更多的原!生!插!件!

2015-03-31 00:13 分享
已邀请:

最佳回复

DCloud_heavensoft

DCloud_heavensoft

  • 枫桥居APP (作者)

    谢谢,非常有帮助

    2015-07-29 14:34

  • 超人爷爷

    照片旋转问题 能加到5+的Camera里吗。

    2016-05-09 16:15

枫桥居APP

枫桥居APP (作者)

需要的同志们把这个帖子顶起来~

钟文

钟文

这个很需要,期待官方开发

Rango

Rango

同样期待

harry1

harry1

waiting

开拓者

开拓者

对于iphone5+上拍照旋转的问题,经过长时间的查找,总算找到了一个比较简洁的解决方案,供各位参考:

  1. 从网上找到mobileBUGFix.mini.js和exif.js,并下载在本项目工程的js目录下
  2. 在需要调用拍照功能的某个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",甚至别的路径描述。
  3. 在该页面上添加“拍照”按钮和显示图片的img控件,比如:<span id='photo' style='font-size:20px' >拍照</span> <img id='myphoto' style='width:100%' src='a' class='photo' />
  4. 同时添加一个隐藏的file控件和一个隐藏的canvas控件,比如:<input type='file' accept='image/*' id='uploadImage' style='display:none' capture="camera" onchange="selectFileImage(this);" /> <canvas id='mycanvas' style='display:none;' ></canvas>
  5. 然后指定在用户点击“拍照”按钮后,系统会直接点击上述隐藏的file控件,比如:$("#photo").click(function(){$("#uploadImage").click();});
  6. 在该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); }); } }
  7. 最后要感谢提供这两个js文件的大牛们,也希望Hbuilder这个开发工具平台今后有可能把这种共性的问题修复代码直接集成在新版本中,让产品经理和工程师们能把精力关注在业务设计开发上,不对之处,请大家指正。
超人爷爷

超人爷爷

iphone6 有拍照旋转问题。

anke

anke

建议添加官方插件。我遇到这问题,也花了不少时间,前端压缩方案不是很理想,在不同设备上效果不一样。我在iphone4s测试压缩在可以,在iphone5c压缩丢失部分数据(拍照图片达10几兆,ios上对前端压缩有时间限制)。

颠倒梦想

颠倒梦想

不是有zip压缩吗?

anke

anke

图片压缩跟你说的zip压缩不是一回事

颠倒梦想

颠倒梦想

我看问题说的是图片太大不利于网络传输,可以用zip来减小文件体积再传输。

枫桥居APP

枫桥居APP (作者)

小伙伴们,躁起来吧,让官方重视这个问题~鞭策他们前进~

追逐者

追逐者

这已经是大势所趋了,官方赶紧出吧,还有图片浏览可以保存图片的插件也一起做了吧...

尘岳two

尘岳two

照片旋转可以读取exif里面的方向信息,然后自己再转一下。

  • 水御双氛

    hi,关于读取exif里面的方向信息有相应链接或代码可以参考吗?

    2015-10-12 11:19

追逐者

追逐者

自己转是可以的,但是旋转之后再移动图片的话,画出来的图就会有很大的问题

枫桥居APP

枫桥居APP (作者)

官方关注下撒

B5教程网

B5教程网 - http://www.bcty365.com

支持一下

小闹

小闹

iOS系统就会出现

小云菜

小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx

看这边http://ask.dcloud.net.cn/article/200

  • 枫桥居APP (作者)

    目测很棒,回家试试去

    2015-05-11 15:53

萌大叔

萌大叔 - 北航研究院项目经理

三星 NOTE2 N7100
拍照片会旋转90度

nico

nico

我 用的三星gt-i9000和gt-i9200,手机拍照时的方向会影响拍照获取到的图片方向,只有一个方向得到的图片是正的,其他方向都会发生响应角度的旋转,90、280、270度都有,摄像头看到的都是正的

  • 枫桥居APP (作者)

    手机型号不一样就会这样,需要纠正处理,判断照片方向,然后旋转

    2015-05-25 23:45

  • 萌大叔

    回复 枫桥居APP:https://github.com/think2011/localResizeIMG3

    这个插件我改了源代码已经提交,作者在早上已经把代码合并了,现在用这个插件,可以实现自动判断照片旋转的问题了

    2015-05-27 13:36

  • 枫桥居APP (作者)

    这个我之前看过,他那个当时不支持传图片路径.

    2015-05-27 14:24

dcl

dcl

galaxy n5110 、 索爱 LT18I 都是旋转90度

  • 枫桥居APP (作者)

    https://github.com/think2011/localResizeIMG3

    2015-05-27 18:02

  • dcl

    赞一个!

    话说照片方向问题现在有什么解决方案不。

    求指教!

    2015-06-16 15:23

开拓者

开拓者

还是有一个问题,如果我想通过input file控件直接调用摄像头拍摄出照片,然后想直接显示在页面上的时候,就想不明白如何利用plus.zip.compressImage去旋转该照片了,似乎原理上来看可以先把照片保存为临时jpg文件,然后再旋转,然后上传到服务器上,但是如何能一次性更新显示当前页面上图像为正确的方位呢? 真是被这个问题折磨得死去活来了,快3个月都没找到彻底解决办法,脑子生锈了。
官方有没有可能再统一封装一个API,就是可以直接读取input file控件输出的fileobj对象内容,然后判断拍到的照片已经旋转的角度,直接把它修正好,然后输出成DataURL的格式,这样大家就不会再蛋疼吧。
感觉上这种共性问题很适合开发工具提供方统一解决了,这样用户会越来越多,这样比增加更多新功能都更紧急,实话来讲,这种功能让我支付点报酬都是愿意的,有点说大了可能,抱歉。

  • 蔡繁荣

    我代表官方收集下意愿,对这种功能,你愿意付费多少呢:)

    2016-01-24 11:17

  • 开拓者

    五百多元怎样?假设官方本来也打算增加这个功能的话

    2016-01-25 04:22

  • 小云菜

    回复 开拓者:就是判断横图还是竖图吧,我这边基本上解决了

    2016-01-25 10:15

  • 开拓者

    代码量多吗?

    2016-01-25 22:20

aaaa

aaaa

可以研究下这个http://ask.dcloud.net.cn/article/527

开拓者

开拓者

继续讨论下这个照片旋转的问题,我的想法是既然Hbuilder的使命是希望让它成为HTML5时代的最受大众喜欢的开发工具,那么就可以考虑如何解决这种共性的问题,让我这种入门级开发爱好者能节约时间,更加聚焦在应用系统本身的设计上。
如果Hbuilder团队由于资源精力的问题,无暇顾及这种小问题的解决的话,那么有没有可能公开招募那些已经解决个这类问题的用户来封装出一个专门的API,集成在下一版中? 至于费用的问题,可以考虑一些新的玩法,比如可以在本网站首页开辟一个专门区域,罗列出收集到的全部共性问题,然后用户可以根据自己的情况,选择支付部分费用,最低10元,赠送多少积分,付费更多的时候,赠送更多积分等,然后有解决方案的人可以竞拍,如果代码被审核通过,那么就得到部分费用,多余的费用可以保存在推广支持的基金里。Hbuilder团队的专家可以提供更高级的培训,咨询等服务,中国人原创一个能普及的开发工具不容易,大家可以集思广益,看如何来从细节问题入手,让每个用户用得更加得心应手。

我的判断是在移动互联网时代,传统的那种卖软件license方式更加没市场空间了,绝大部分软件包括开发工具可能都只能免费,因为如果你不免费,就有可能有另外一帮人提供一个免费的,甚至长期来看更好的类似软件/工具,但是开发一个软件又是要投入的,解决这个问题的一条途径可能就是借助于庞大的用户群基数,把选择决策权力交还给大家,资源众筹一些资金,只要是方向正确,热情用户越来越多的话,那么就有机会逐步地解决所有发现的痛点。
另外一个相关的想法是使用JS开发应用系统,已经可以做到前后端代码几乎统一了,并且后端可以全部使用免费开源系统,因此将来能掌握这种开发技能的人会更多,相应地,其中有大部分人可能会期望Hbuilder这种开发工具能变得更加傻瓜化使用,提供更多封装好的API,用户就能更聚焦在自己的业务逻辑上。
其实最近半年多的使用经验来看,还是能发现更多的改进机会点的,比如JS代码混淆,我的理解是这应该成为Hbuilder的一个基本功能,集成在打包发行功能中,这样保证每个开发者发布的JS代码是经过了基本的混淆的,打消大家对于特色设计保护的顾虑,考虑下来,这个混淆功能没必要做得太复杂,就是把工程里的所有目录和代码拷贝到发行目录下,然后其中每个JS文件中的注释内容去掉,换行符号,空格等去掉,把var 变量替换成不容易理解猜测的数字变量,可能就差不多了,比如以首字母+数字顺序号的方式来替换,然后对于每个JS文件都单独做混淆。

  • DCloud_heavensoft

    图片旋转是bug,在哪部手机上有问题,请直接报就好了。js混淆,在HBuilder的插件里有一个插件,但目前大部分用户是用glup来处理的。

    2016-01-27 07:14

  • 开拓者

    就是在iphone6 plus上发现竖拍了后,照片是横着的,那你们会在下一版升级时解决吗?

    2016-01-27 20:53

  • 开拓者

    请问有改进计划吗?

    2016-02-02 13:31

开拓者

开拓者

官方能帮忙回复下吗?如果确认是一个BUG的话,那么我感觉总得要有个说法和计划,对吧,否则大家怎么可能真的推广使用这个开发平台呢?有点不明白现在Hbuilder的开发关注重点,本以为应该是优先解决用户发现的问题。
如果等微信的应用号都开始推广的时候,那么个人感觉你们的流应用平台也不一定好去抗衡啊,这么多的问题没有人来关注及时答复,人家可是多少研发资源去搞。

enterqqemail@qq.com

enterqqemail@qq.com

马克一下,强烈支持优先解决啊

379288498@qq.com

379288498@qq.com

我解决了,用本调用解决的,首页本地写一个获取图片旋转角度的方法:
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);
});

mackes

mackes

请使用:https://git.oschina.net/mackes/zen.app.js

394155087@qq.com

394155087@qq.com

到现在还是没有给出图片方向修正的方法啊????

要回复问题请先登录注册