前言:
前几天, 写了一篇关于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" οnchange="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