html页面中拍照和上传照片那些事儿(二)
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页面中拍照和上传照片那些事儿(二)的更多相关文章
- html页面中拍照和上传照片那些事儿(一)
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6709037.html 一. 思路: <input type= ...
- C# 之 FTPserver中文件上传与下载(二)
通过上一篇博客<C# 之 FTPserver中文件上传与下载(一)>,我们已经创建好了一个FTPserver,而且该server须要username和password的验证 ...
- 通过链接将JSP页面中一变量传到另一JSP界面中
A.jsp 发送 <a herf="B.jsp?name=<%=name%>">传递到B页面</a> B.jsp 接收 <%String ...
- phonegap 拍照上传照片
js代码 可以完全从 phonegap 官网扣下来 使用的是2.3版本的phonegap<script type="text/javascript" src="c ...
- 获取页面中更新删除传过来的id
利用uri辅助函数 $id=$this->uri->segment(4); 其中segment(参数) 是表示你要截取获得第几个数据.
- 李洪强iOS开发之上传照片时英文改中文
今天在做项目的时候,有一个功能是上传照片选择系统相册的照片,或者拍照上传照片,但是页面上的文字是英文的, 需求想改成中文的,解决方法是在 info.plist里面添加 Localized resour ...
- webuploader的一个页面多个上传按钮实例
借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览 直接上传图片后拿到回传地址给img标签显示图 ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
上传图片并保存到数据库 seam给我们提供了 s:fileUpload 标签以完成文件上传功能.使用该标签时,要在web.xml中声明一个Seam的过滤器: <filter> <fi ...
随机推荐
- iOS 第三方类库之MBProgressHUD
github链接地址 MBProgressHUD是一个开源的第三方类库实现了很多种样式的提示框,类似Activity indicator,使用上简单.方便,并且可以对显示的内容进行自定义,功能很强大, ...
- mongodb详细教程
转自:https://www.cnblogs.com/liruihuan/tag/MongoDB/
- React初识整理(一)
一.React的特点 1.自动化的UI状态管理:自动完成数据变化与界面效果的更新. 2.虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然 ...
- 【动态规划】bzoj1044: [HAOI2008]木棍分割
需要滚动优化或者short int卡空间 Description 有n根木棍, 第i根木棍的长度为Li,n根木棍依次连结了一起, 总共有n-1个连接处. 现在允许你最多砍断m个连接处, 砍完后n根木棍 ...
- [LUOGU] P1048 采药
题目描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:" ...
- MySQL中日期函数的使用
1. MySQL中日期函数的使用 1.1. 转DATETIME类型为Date类型 将add_time ::56转化为date类型 select * from product where Date(ad ...
- linux中进程亲和性绑定
什么是绑核所谓绑核,其实就是设定某个进程/线程与某个CPU核的亲和力(affinity).设定以后,Linux调度器就会让这个进程/线程只在所绑定的核上面去运行.但并不是说该进程/线程就独占这个CPU ...
- Python 基本数据类型 (二) - 字符串
str.expandtabs([tabsize]): str类型的expandtabs函数,有一个可选参数tabsize(制表符大小) 详细来说,expandtabs的意思就是,将字符串中的制表符\t ...
- 【javascript面试题】5个经典的面试题
问题1: 作用域 看一下下面的代码: (function(){ var a = b =5; })(); console.log(b); 结果会输出什么? 答案: 5 这个问题考查的要点是两个不同的作用 ...
- 线段树 Mayor's posters
甚至DFS也能过吧 Mayor's posters POJ - 2528 The citizens of Bytetown, AB, could not stand that the candidat ...