js获取ios拍照异常

来源：互联网发布：免费自动交易软件编辑：程序博客网时间：2024/04/29 19:45

JS获取iphone图库中图片的宽高异常

0赞踩收藏

我想要在上传图片前先让用户预览图片，我想要得到图片的宽度和高度进行resize，我的代码如下：

var pic = new Image();var pw,ph;pic.onload = function(){    pw = pic.width;    ph = pic.height;        console.log(pw,ph);    // other code...                    }pic.src = url;

我在桌面端的很多浏览器都测过，都挺正常的。后来开始测移动端，在iphone上时而出问题时而正常。反复测试后发现问题出在使用iphone摄像头拍摄的照片，这些照片尺寸是3264x2448，但是其实照片的尺寸是2448x3264，宽和高正好是相反的，后来我把照片导到电脑里，的确尺寸应该是2448x3264。我不知道这种情况是怎么导致的~~~~~

链接

bennyzhao5

5月11日提问

添加评论

得票数时间先后

3 个回答

5赞踩

采纳

悄悄告诉你，做这个功能会坑死你。

目前我用了约 30k 的代码来实现该功能。具体效果可以看 http://qingpai.baidu.com

常规解决方案

使用 FileReader 获取图片信息
读取图片的 exif 信息，并解析出其中的 orientation 、PixelXDimension，PixelYDimension 信息
用 canvas 及 canvas 2d 的相关 api 按照 orientation 进行旋转。
输出 canvas 信息。

bug list

iOS 对读取图片尺寸有限制（100万像素）。而实际拍照的照片均在 100w 像素以上，会导致直接读取图片是，图片的高度坍塌，需要特殊处理
iOS 对图片进行 canvas 处理时，获取到的图片是原始图片的副本，长宽为原始图片的一半。
图片太大会导致内存爆掉，处理图片时，页面也会进入假死状态。5s 需要 300ms，iPhone4s 处理时间约 2s
UC 不吃 iOS 这一套，修 iOS bug 1 的方案会导致 UC 浏览器渲染出问题。

思路就基本这样了

解决方案网上都有现成的，自己动手搜一搜就能找到。

https://github.com/QzoneTouch/commonWidget 这个地址包含了一部分解决方案。

链接

HJin.me2.4k

5月29日回答

添加评论

0赞踩

iPhone拍摄的图片的起始点是屏幕的左下角，所以宽和高是相反的。。

链接

feefk5

5月29日回答

显示评论 (1条)

0赞踩

你拍照时，iPhone 会根据重力感应决定你的照片的宽和高，举个例子，你如果横着拍照，得到的照片的宽高比是4:3，如果是竖着拍照的话宽高比就成了3:4了，你可以测试一下看看。

http://www.fantxi.com/blog/archives/create-thumbnail-images-html5/comment-page-2#comments

html5 canvas 前端生成缩略图

更新:
2013/08/01: 解决了后面遇到的bug: 图片被压扁(IOS6); 图片被旋转;
整个源码放在: https://github.com/kairyou/html5-make-thumb
新方案需要后面实现的, 就是下面的旧版本里的功能(水印/是否强制拉伸以适应目标尺寸等功能).

w3ctech长沙站交流会, 里面分享的PPT: http://www.slideshare.net/99leon/html5-create-thumbnail

之前有bug的版本放在分支old里(不推荐使用), 请使用更新的方案~

2013/01/07:
11年做的公司的移动页面, 上传图片时缩略图是靠后端生成, 但是随着现在的手机越来越牛X(摄像头比数码相机还厉害~), 图片体积也越来越大.
一个几M的图, 也许我们只是用来生成一个100*100的小图, 上传到后端再生成缩略图就大大的浪费了, 而且提交表单的等待时间也非长久, 对用户体验也不好.
普通的web表单, 上传图片靠后端来生成缩略图很平常, 但有了HTML5, 针对移动Web开发可以考虑使用前端生成缩略图了.

写了个生成缩略图的jquery的插件, 主要参数:

width: 生成缩略图的宽; height: 生成缩略图的高;
fill: 图片小于缩略图尺寸时, 是否填充(false: 缩略图宽高自动缩放到适应图片, true: 缩略图尺寸不变)
background:生成图片填充背景(默认#fff, 设置null时, 背景透明)
type: 生成图片类型 ('image/jpeg' 或 'image/png')
size: 生成缩略图方式, 生成缩略图的效果主要参考了CSS3的background-size属性:
  contain: 等比缩放并拉伸, 图片全部显示;
  cover: 等比缩放并拉伸, 图片把容器完全覆盖;
  auto: 图片不拉伸, 居中显示.
mark: 水印
  文字水印: mark = {padding: 5, height: 18, text: 'test', color: '#000', font: '400 18px Arial'}
  图片水印: mark = {padding: 5, src: 'mark.png', width: 34, height: 45};
stretch: 小图是否强制拉伸以适应缩略图的尺寸(size = auto/contain时)
success: 生成缩略图后 callback

大体思路如下:
首先判断是否支持fileReader(支持fileReader, canvas就不在话下了)
不支持的话: 不做任何操作, 默认的input type="file"上传, 靠后端生成缩略图.
支持的情况: input change时, 判断选择的文件是图片, 就创建一个隐藏的canvas, 并把图片画到canvas里,
因为要生成缩略图, 所以在canvas里画图的时候, 控制剪切坐标和被剪切的宽高就OK了.
另外可以加上水印, 图片水印或者文字水印加到canvas上面也是比较方便的.
最后 canvas.toDataURL 转成base64, post到后端(先把input type="file"移除, 再生成个新的input type="hidden"储存图片数据), 后端接收后直接保存为图片就OK了.
主要用到: FileReader和canvas, 一个用来读取本地图片, 一个用来生成缩略图.

做移动网页开发的同学可以考虑下.

0 0