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 ...
随机推荐
- node爬虫(简版)
做node爬虫,首先像如何的去做这个爬虫,首先先想下思路,我这里要爬取一个页面的数据,要调取网页的数据,转换成页面格式(html+div)格式,然后提取里面独特的属性值,再把你提取的值,传送给你的页面 ...
- 老男孩Python高级全栈开发工程师【真正的全套完整无加密】
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师[真正的全套完整无加密] 课程大纲 老男孩python全栈,Python 全栈,Python教程,Django ...
- 【linux】【mysql】CentOS7安装mysql5.6.26
http://www.cnblogs.com/dreamhome/p/4716425.html linux系统CentOS7到http://mirrors.sohu.com/mysql/下载想 ...
- nrf52832开发配置文件小记
nrf52832在配置定时器和port事件的时候,需要在nrf_drv_config.h(sdk12.x.0版本)文件中,将相应的使能,比如:#define TIMER0_ENABLED 1否则,是不 ...
- JQuery基本事件函数
1,click单击事件 2,blur失去光标事件,focus获得光标事件 3,JQuery.on()函数:为html元素绑定事件,如下代码: $("div").on("c ...
- js 百度云搜索框
// ==UserScript==// @name 百度云插件+APIKey// @namespace // @version 5.0.2.1// @description 在百度云网盘的页面添加一个 ...
- Knockout v3.4.0 中文版教程-2-监控-通过监控创建视图模型(上)
2. 监控 1.通过监控创建视图模型 1. 监控 Knockout是基于以下三个核心特性: 监控和依赖跟踪 声明式绑定 模板 在本节,你将第一次了解这三个特性,在这之前,我们先来了解以下MVVM模式和 ...
- jquery map.js
(function ($) { HashMap = function () { var index = 0; var content = ''; var keyV = new Array(); var ...
- Windows 通过 SecureCRT 8.x 上传文件到Linux服务器
1.SecureCRT 连接 Linux 服务器,这一步操作简单: 2.连接并登录成功后,直接在连接成功的页签上 右键 -> Connect SFTP Session 打开SFTP窗口: 3. ...
- BNUOJ 1207 滑雪
滑雪 Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: 10886 ...