IOS照片颠倒分析及移动/页面端的处理策略和思路
前言:
前几天, 写了一篇关于IOS手机上传照片颠倒的技术分析文章: IOS照片颠倒分析及PHP服务端的处理.
不过其思路是从服务器来进行处理的, 这种做法相当普遍.
今天来讲述下, 如何从移动端/页面端, 来解决这个问题, 侧重于讲讲思路.
意义:
但移动互联网有它独特的背景, 至今降耗电和省流量, 是很多移动端产品孜孜努力的方向.
再者移动端手机的照片大小, 普遍较大, 因此直接往服务器传, 往往会消耗很多流量, 在弱网环境下, 用户等待的时间也长, 时常会失败, 体验非常不好. 因此移动端/页面端(webapp)进行图片的压缩/缩放, 就非常有意义了.
同时, 既然已经做了图片的压缩和大小缩放, 何不一起把图片的旋转也一起搞定.
可行性分析:
由于IOS照片图片颠倒, 是以为IOS的不作为, 不过其写入了Orientation信息到EXIF信息头中(jpeg和tiff文件).
想要解决颠倒问题, 先要看, 能否在移动/页面端, 获取到EXIF信息.
幸好, 我们拥有exif.js, 这个开源的js工具库, 帮我们铺好了路.
这是资料链接: Exif.js 读取图像的元数据 http://code.ciaoca.com/javascript/exif-js/ .
其对图片EXIF信息头的处理, 非常的简洁:
*) html的相关代码:
<input type="file" accept="image/*" capture="camera" onchange="selectFileImage(this);">
*) exif的使用代码片段:
function selectFileImage(file) {
var Orientation = null;
//获取照片方向角属性,用户旋转控制
EXIF.getData(file, function() {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
}
这边变量file为, input控件选择具体图片文件后得到的对象, Orientation即是旋转信息.
Orientation的取值和含义:
旋转角度 |
参数 |
0° |
1 |
顺时针90° |
6 |
逆时针90° |
8 |
180° |
3 |
颠倒和缩放:
在页面端, 需要处理是的限制大小尺寸, 比如设置一个最大宽度值(限宽不限高), 同时又要解决图片旋转问题.
其思路是借助canvas重绘来实现, 1). 先确定旋转方向, 2). 图片尺寸缩小调整 3). 确定canvas大小, 4). 绘制过程.
image = new Image();
image.onload = function() {
var canvas = document.getElementById("myCanvas");
var expectWidth, expectHeight;
// *) 确定目标的宽和高
if ( Orientation == 6 || Orientation == 8 ) {
expectWidth = image.height;
expectHeight = image.width;
} else {
expectWidth = image.width;
expectHeight = image.height;
} // *) 最大宽度限制及缩小变化
var MAX_WIDTH = 480;
if ( expectWidth > MAX_WIDTH ) {
expectHeight = expectHeight * MAX_WIDTH / expectWidth;
expectWidth = MAX_WIDTH;
} if ( Orientation == 6 ) {
// 顺时针90°
ctx.save();
ctx.translate(expectWidth/2, expectHeight/2);
ctx.rotate(90 * Math.PI / 180.0);
ctx.drawImage(image, -expectHeight/2, -expectWidth/2, expectHeight, expectWidth);
} else if ( Orientation == 8 ) {
// 逆时针90°
ctx.save();
ctx.translate(expectWidth/2, expectHeight/2);
ctx.rotate(270 * Math.PI / 180.0);
ctx.drawImage(image, -expectHeight/2, -expectWidth/2, expectHeight, expectWidth);
ctx.restore();
} else if ( Orientation == 3 ) {
// 180°
ctx.save();
ctx.translate(expectWidth/2, expectHeight/2);
ctx.rotate(Math.PI);
ctx.drawImage(image, -expectWidth/2, -expectHeight/2, expectWidth, expectHeight);
ctx.restore();
} else {
ctx.drawImage(image, 0, 0, expectWidth, expectHeight);
} // *) 获取旋转和压缩后的图片数据.
var imagedata = canvas.toDataURL("image/png"); }
整个流程相对, 还是比较简单的.
这边讲讲canvas的drawImage, 如何去绘制旋转图片的思路的.
1). 先把原点移至canvas的中点, translate
2). 进行旋转操作, rorate
3). 进行绘制, 此时canvas的绘制区域坐标范围为(-w/2, -h/2, w/2, h/2), 需要注意下.
图片上传:
图片压缩和旋转后, 图片的数据上传, 又是怎么实现的呢?
一种思路, 就是上文提到的:
var imageData = canvas.toDataURL("image/png");
其本质的工作, 就是把图片的二进制数据, 转换为了base64编码后的数据, 这样就可以通过普通的Ajax来上传了, 也就实现了文件的异步上传工作.
php和nginx文章的相关列表:
• nginx服务配置---php服务接入
• nginx+tomcat集群配置(1)---根目录设定和多后端分发配置
• nginx+tomcat集群配置(2)---静态和动态资源的分离
• nginx+tomcat集群配置(3)---获取真实客户端IP
• nginx+tomcat集群配置(4)--rewrite规则和多应用根目录设定思路
后记:
应该说有幸吧, 通过这个简单的例子, 追踪定位, 到最后的问题解决, 其实学到了很多. 以前确实犹如井底之蛙, 以为很多问题, 只是一时疏忽而已, 在小的问题, 在背后也有大学问, 感谢每一天, 无论晴雨, 都是美好的一天.
个人站点&公众号:
个人微信公众号: 小木的智慧屋
个人游戏作品集站点(尚在建设中...): www.mmxfgame.com
IOS照片颠倒分析及移动/页面端的处理策略和思路的更多相关文章
- IOS照片颠倒分析及PHP服务端的处理
前言: 因朋友的PHP小项目, 而去帮忙解决了一个小问题, 现在来总结概括一下. 也不知道大家在使用和开发的过程中有没有遇到类似的场景, IPhone手机上传照片后, 发现图片方向颠倒了, 甚至各种姿 ...
- iOS app内存分析套路
iOS app内存分析套路 Xcode下查看app内存使用情况有2中方法: Navigator导航栏中的Debug navigator中的Memory Instruments 一.Debug navi ...
- 基于APNs最新HTTP/2接口实现iOS的高性能消息推送(服务端篇)
1.前言 本文要分享的消息推送指的是当iOS端APP被关闭或者处于后台时,还能收到消息/信息/指令的能力. 这种在APP处于后台或关闭情况下的消息推送能力,通常在以下场景下非常有用: 1)IM即时通讯 ...
- 解决ios下的微信打开的页面背景音乐无法自动播放
后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...
- iOS crash日志分析
iOS crash日志分析 一. 寻找crash文件:手机崩溃后的ips或者crash文件(ips文件可以直接修改成crash文件,直接改后缀名就可以了),这里说下如何拿到crash文件 1. 把运行 ...
- iOS的内存分析和内存管理
iOS的内存分析和内存管理 [内存管理]一直是iOS开发中的一个重点. 本文就带你从内存分析开始一步步了解内存的占用情况,从真实的情况中领悟真正项目开发过程中的内存的使用情况. 注:本文默认你熟悉 M ...
- iOS 崩溃日志分析(个人总结,最实用)
iOS 崩溃日志分析(个人总结,最实用) 要分析奔溃日志需要三个文件:crash日志,symbolicatecrash分析工具,.dSYM符号集 0. 在桌面创建一个crash文件夹 1. 需要Xco ...
- 转: HTTP Live Streaming直播(iOS直播)技术分析与实现
http://www.cnblogs.com/haibindev/archive/2013/01/30/2880764.html HTTP Live Streaming直播(iOS直播)技术分析与实现 ...
- amazeui页面分析之登录页面
amazeui页面分析之登录页面 一.总结 1.tpl命名空间:tpl命名空间的样式都是从app.css里面来的,app.css用用来移动网站开发的样式 2.表单样式:am-form到am-form- ...
随机推荐
- javascript 中的借鸡生蛋
如题所说,其实指的是 js 中的内置函数和 apply 的结合使用.这种用法很讨巧,读过 jQuery 源码的小伙伴都知道,它在里面被应用的非常广泛和精妙! 梨子:找出一个数组中的最大值和最小值 普遍 ...
- ubuntu 下安装mysql,以及配置远程登录
安装MysQL 在Ubuntu14.04下安装MySQL比较简单,只需下面这条命令就行了: 1.输入 sudo apt-get install mysql-server 2.继续执行后,需要设定MyS ...
- app上传到App Store的快捷方法及步骤
跳过证书的申请及配置概要文件的设置, 现在根据已有的配置概要文件及发布证书开始: 1.先在Xcode上的PROJECT和TARGETS->Build Setting->Code Signi ...
- div随意拖动小例子
<html> <head> <title> Drag Demo 1 </title> <style type="text/css&quo ...
- Maven搭建SSH环境
一.新建maven项目 选中maven-aechetype-webapp group Id一般为公司域 :Artifact Id相当于项目名称 :version不需要更改:Package不使用默认,手 ...
- 翻转和翻页效果TextFile的几种自定义例子
前一篇文章,已经介绍了BMR的基础用法,再结合Spark和Scala的文档,我想应该是可以开始你的数据分析之路的.这一篇文章,着重进行一些简单的思路上的引导和分析.如果你分析招聘数据时,卡在了某个环节 ...
- eclipse 相同变量高亮显示
windows-> preferences-> java-> Editor-> Mark Occurences
- pdsh使用
原文地址:http://bbs.chinaunix.net/thread-2002080-1-1.html 当我们管理数以十计或者更多的集群系统时,往往需要在每台机器上执行同样的命令,或者拷贝同样的文 ...
- Java泛型学习笔记 - (四)有界类型参数
1. 当我们希望对泛型的类型参数的类型进行限制的时候(好拗口), 我们就应该使用有界类型参数(Bounded Type Parameters). 有界类型参数使用extends关键字后面接上边界类型来 ...
- Java 数组声明与初始化
引言 学习了好久的java,每次要写数组的声明和初始化代码,总是理不清.最近又碰到了一次这种情况.这次拿出<Thinking In Java>好好总结一翻. 数组声明 对于数组的声明其实都 ...