js处理iphone照片旋转问题

当我们在浏览器使用标签显示图片时,对于iphone手机拍出的照片会存在图片方向和在手机上显示及浏览器直接打开时不同,对于产生这个问题的原因这里有一篇很详细的说明及iOS开发中的处理方式:http://www.tuicool.com/articles/YfeeqaU。在这里,笔者对网页中使用js方式的处理进行简单的记录,便于日后查看。

1.引入jquery.min.js/jquery.exif.js/jQueryRotate.js

2.html:

mg id="imgId" src="xxx" exif=true>

3.js:

var img=$("#imgId");
var orientation=img.exif("Orientation");
if (typeof orientation[0]==‘undefined"){
    console.log("没有Orientation信息");
    return;
}
switch (orientation[0]){
    case ‘3‘:
        img.rotate(180);
        break;
    case ‘6‘:
        img.rotate(90);
        break;
    case ‘8‘:
        img.rotate(270);
        break;
}
时间: 2024-10-08 22:51:31

js处理iphone照片旋转问题的相关文章

js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能

html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" method="post" enctype="multipart/form-data">     <input name="photoimg" type="file" id="xwzx_f" style

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

转:https://www.cnblogs.com/lovelgx/articles/8656615.html ---恢复内容开始--- 问题:html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 解决方法:利用exif.js解决ios手机上传竖拍照片旋转90度问题 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见 htt

移动端上传照片 预览+draw on Canvas demo(解决iOS等设备照片旋转90度的bug)

背景: 本人的一个移动端H5项目,需求如下: 手机相册选取或拍摄照片后在页面上预览 然后绘制在canvas画布上. 这里,我们先看一个demo(http://jsfiddle.net/q3011893/83qfqpk8/embedded/) 操作步骤: 1.点击选择文件,拍摄一张照片,此时"预览:"文字下会显示你刚才拍摄的照片: 2.再点击"draw on Canvas",该按钮下的画布会绘制你刚才拍摄的照片. 正常的结果: 正文: 让input file支持拍照+

调用系统相机导致照片旋转问题的修复

如题,相信非常多开发人员在调用系统照相机接收拍好的照片时,发现照片被无故旋转了90度.这一问题反映在大部分的三星手机上,当然其它的机器还没试全然,总之是有问题. 于是乎想到例如以下的解决的方法: 识别机型,获取手机型号.然后推断是否须要旋转: 通过获取照片宽度和高度推断是否须要旋转: 自己动手写一个照相机Activity.自己来获取摄像头数据,保存照片: 分析发生旋转的照片数据.动态推断是否须要旋转,以及旋转正确的角度. 前三种方法均不是理想的解决方式. 首先说1:这样的相似于穷举的办法,总会有

iPhone照片格式heic图片怎么打开

苹果自iOS11系统之后默认的是heic图片格式,在电脑和安卓中都无法直接查看,需要将其转换图片格式,那苹果heic图片怎么转换成jpg格式?下面我们一起来看看吧! 使用工具:电脑.图片 操作方法: 1.想要打开heic格式图片,需要把格式转换一下,电脑可见的图片格式经常使用的也就是jpg.png.bmp,转换成这三种任何一种都可以在电脑和安卓手机上打开: 2.首先打开转换工具,会有一个竖着的界面,可以调成横屏看着方便一些,也就是添加图片界面,添加图片之前把heic图片传到电脑上,然后点击添加图

利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见  http://code.ciaoca.com/javascript/exif-js/ 这里主要用到Orientation属性. Orientation属性说明如下: 旋转角度 参数 0° 1 顺时针90° 6 逆时针9

解决ios手机上传竖拍照片旋转90度的问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 这里主要利用exif.js读取照片的拍摄信息. Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向.相机设备型号.拍摄时间.ISO 感光度.GPS 地理位置等数据. EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC

iPhone照片导入到Mac电脑方法

今天突然想把iPhone中的照片导入到Mac中,不知道该怎么办.如果在Windows电脑中,会在"我的电脑"中新增一个盘符,表示了手机中的文件夹,里面就是手机的照片.但是在Mac中,在Finder中并没有找到iPhone的文件夹,通过Itunes也无法将照片到处,应该怎么办呢?方法步骤如下: (1)iPhone连接Mac,到电脑上的Launchpad中找到一个"图像捕捉"的程序,这个是Mac自带的一个图像捕捉的工具,如下: . (2)自己建一个文件夹,用于存放等下从

iOS 代码控制iPhone&amp;iPad旋转

在APPDelegate中添加如下代码 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #3d1d81 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; min-height: 13.0px } p.p4 { marg