本文为原创,转载请注明出处: cnzt       文章:cnzt-p

http://www.cnblogs.com/zt-blog/p/6895352.html

本文主要说下iOS上传的照片在安卓机上翻转的问题。

问题:苹果机竖着拍个照片,上传到server,再在安卓手机打开,发现图片翻转了呵呵哒……

原因:苹果手机默认的方向是水平且home键向右的方向,所有竖着拍照相当于顺时针转了90度,恩。所以到安卓手机上翻了90度。

解决方法:

1. 前端js解决

  利用canvas和exif.js(用于读取图片的exit信息,如orientation)达到目的。

  思路:

  html --  input(type=file)输入框,用于上传图片的

  js -- 用FileReader读取file文件,将结果用于新建一个图片Image的src,图片加载完成后创建一个canvas,根据图片大小设置canvas的宽高,将图片画到canvas画布上。用exif.js读取图片的orientation相机的方向信息(1-8),根据方向决定canvas画布需要转多少度,最后将旋转后的canvas转化成dataurl赋值给dom预览。

  orientation参考这里

  弊端:这样只能改变本地预览的图片方向,如果是直接向server发送file文件作为request data,则此方法不能达到目的。

2. server端解决

  server端拿到图片后处理orientation,这可以从根本上解决问题。

html页面中拍照和上传照片那些事儿(二)的更多相关文章

  1. html页面中拍照和上传照片那些事儿(一)

    本文为原创,转载请注明出处: cnzt  文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6709037.html  一. 思路: <input type= ...

  2. C# 之 FTPserver中文件上传与下载(二)

            通过上一篇博客<C# 之 FTPserver中文件上传与下载(一)>,我们已经创建好了一个FTPserver,而且该server须要username和password的验证 ...

  3. 通过链接将JSP页面中一变量传到另一JSP界面中

    A.jsp 发送 <a herf="B.jsp?name=<%=name%>">传递到B页面</a> B.jsp  接收 <%String ...

  4. phonegap 拍照上传照片

    js代码 可以完全从  phonegap 官网扣下来 使用的是2.3版本的phonegap<script type="text/javascript" src="c ...

  5. 获取页面中更新删除传过来的id

    利用uri辅助函数 $id=$this->uri->segment(4); 其中segment(参数)  是表示你要截取获得第几个数据.

  6. 李洪强iOS开发之上传照片时英文改中文

    今天在做项目的时候,有一个功能是上传照片选择系统相册的照片,或者拍照上传照片,但是页面上的文字是英文的, 需求想改成中文的,解决方法是在 info.plist里面添加 Localized resour ...

  7. webuploader的一个页面多个上传按钮实例

    借鉴一位大佬的demo  附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览  直接上传图片后拿到回传地址给img标签显示图 ...

  8. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  9. 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中

    上传图片并保存到数据库 seam给我们提供了 s:fileUpload 标签以完成文件上传功能.使用该标签时,要在web.xml中声明一个Seam的过滤器: <filter> <fi ...

随机推荐

  1. iOS 第三方类库之MBProgressHUD

    github链接地址 MBProgressHUD是一个开源的第三方类库实现了很多种样式的提示框,类似Activity indicator,使用上简单.方便,并且可以对显示的内容进行自定义,功能很强大, ...

  2. mongodb详细教程

    转自:https://www.cnblogs.com/liruihuan/tag/MongoDB/

  3. React初识整理(一)

    一.React的特点 1.自动化的UI状态管理:自动完成数据变化与界面效果的更新. 2.虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然 ...

  4. 【动态规划】bzoj1044: [HAOI2008]木棍分割

    需要滚动优化或者short int卡空间 Description 有n根木棍, 第i根木棍的长度为Li,n根木棍依次连结了一起, 总共有n-1个连接处. 现在允许你最多砍断m个连接处, 砍完后n根木棍 ...

  5. [LUOGU] P1048 采药

    题目描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:" ...

  6. MySQL中日期函数的使用

    1. MySQL中日期函数的使用 1.1. 转DATETIME类型为Date类型 将add_time ::56转化为date类型 select * from product where Date(ad ...

  7. linux中进程亲和性绑定

    什么是绑核所谓绑核,其实就是设定某个进程/线程与某个CPU核的亲和力(affinity).设定以后,Linux调度器就会让这个进程/线程只在所绑定的核上面去运行.但并不是说该进程/线程就独占这个CPU ...

  8. Python 基本数据类型 (二) - 字符串

    str.expandtabs([tabsize]): str类型的expandtabs函数,有一个可选参数tabsize(制表符大小) 详细来说,expandtabs的意思就是,将字符串中的制表符\t ...

  9. 【javascript面试题】5个经典的面试题

    问题1: 作用域 看一下下面的代码: (function(){ var a = b =5; })(); console.log(b); 结果会输出什么? 答案: 5 这个问题考查的要点是两个不同的作用 ...

  10. 线段树 Mayor's posters

    甚至DFS也能过吧 Mayor's posters POJ - 2528 The citizens of Bytetown, AB, could not stand that the candidat ...