在web中如何调整上传过的图片方向 (exif)
前提: 相机中拍的照片放到web上不会自动识别方向,如有些竖向显示的照片放到web上横向显示。这些照片在windows上是正确显示的。但是web不会自动旋转照片到正确方向。下面我们通过两种方法来实现这件事情。
EXIF 可交换图形文件格式。是专门为数码相机的照片设定的,可以记录数据照片的属性信息和拍摄数据。
数码设备拍摄照片时,会把许多属性附加在照片文件里,这些属性构成了大家常说的 Exif 信息。访问我的相册会发现照片下也有对应的 Exif 信息。Exif 中有个 Orientation 字段,用来存放照片方向,这就是我们需要的,看下它的定义
- JS 前端解决
如何从图片中获取 Exif 信息,各个语言都有封装好的代码可以直接使用。Javascript 也不例外,国外某同学 08 年就发布了可用代码。他的做法分为两步,首先通过 Ajax 获取原始二进制,这在 firefox 和 webkit 比较好办,在 IE 下需要借助 VBScript 的帮忙;第二步是从原始数据不同位置获取相关信息。
从图片 Exif 信息中取到 Orientation 后,就可以根据它来自动旋转图片了,canvas、filter 滤镜、vml、css3 都可以实现图片的旋转。
综合上文,写了一个 demo,兼容大部分浏览器。【demo 由一个web端开发人员写的】
其实,大部分的图片查看客户端早已支持自动旋转,所以一般情况下数码设备拍的照片用电脑看,方向都是正确的。许多缩略图生成程序,也是可以指定缩放前自动旋转的(例如 ImageMagick 的 -auto-orient 参数)。
原文链接:https://imququ.com/post/how-to-auto-rotate-photo-in-css.html
exif.js https://github.com/exif-js/exif-js
主要引用了:
<script type="text/javascript" src="/Scripts/BinaryAjax.js"></script>
<script type="text/javascript" src="/Scripts/exif.js"></script>
<script type="text/javascript" src="/Scripts/rotate.js"></script>
BinaryAjax('test.jpg', function (o) {
var oExif = EXIF.readFromBinaryFile(o.binaryResponse),
orientation = oExif.Orientation;
html = []; html.push('<ol>');
for (var key in oExif) {
var val = oExif[key];
html.push('<li>', key, ' : <em>');
html.push(val, '</em></li>');
}
html.push('</ol>');
document.getElementById('console').innerHTML = html.join(''); function () {
var img = document.getElementById('img');
switch (orientation) {
case 6:
Rotate(img, '90deg');
break;
case 3:
Rotate(img, '180deg');
break;
case 8:
Rotate(img, '270deg');
break;
}
};
});
- 通过后台代码解决
C# 代码解决图片旋转问题。
public static void rotating(Bitmap img,ref int width, ref int height, int orien)
{
int ow = width;
switch (orien)
{
case :
img.RotateFlip(RotateFlipType.RotateNoneFlipX);//horizontal flip
break;
case :
img.RotateFlip(RotateFlipType.Rotate180FlipNone);//right-top
break;
case :
img.RotateFlip(RotateFlipType.RotateNoneFlipY);//vertical flip
break;
case :
img.RotateFlip(RotateFlipType.Rotate90FlipX);
break;
case :
img.RotateFlip(RotateFlipType.Rotate90FlipNone);//right-top
width = height;
height = ow;
break;
case :
img.RotateFlip(RotateFlipType.Rotate270FlipX);
break;
case :
img.RotateFlip(RotateFlipType.Rotate270FlipNone);//left-bottom
width = height;
height = ow;
break;
default:
break;
}
}
在web中如何调整上传过的图片方向 (exif)的更多相关文章
- python web中的文件上传与下载
django 框架下 实现服务端的文件上传与下载: import jsonimport osimport uuid def attachment_upload(request): "&quo ...
- 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)
1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...
- web实现大文件上传分片上传断点续传
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- IIS 7 中设置文件上传大小的方法
在IIS 6.0中设置文件上传大小的方法,就是配置如下节点: <system.web> <httpRuntime maxRequestLength="1918200&quo ...
- 基于spring-boot的web应用,ckeditor上传文件图片文件
说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...
- umask设置导致的weblogic中的应用上传的文件没有权限打开
去年,在公司的某一weblogic上部署的web应用上传文件后却没有读的权限.因为weblogic在Linux上部署,上传文件是mount到了一台安装了NFS的Windows Server上. 当时本 ...
- asp.net中使用swfupload上传大文件
转载:http://www.cnblogs.com/niunan/archive/2012/01/12/2320705.html 花了一天多时间研究出来的,其实也就是网上下别人的代码然后再自己修修改改 ...
- JAVA Web 之 struts2文件上传下载演示(二)(转)
JAVA Web 之 struts2文件上传下载演示(二) 一.文件上传演示 详细查看本人的另一篇博客 http://titanseason.iteye.com/blog/1489397 二.文件下载 ...
- JAVA Web 之 struts2文件上传下载演示(一)(转)
JAVA Web 之 struts2文件上传下载演示(一) 一.文件上传演示 1.需要的jar包 大多数的jar包都是struts里面的,大家把jar包直接复制到WebContent/WEB-INF/ ...
随机推荐
- 全网最详细的大数据集群环境下多个不同版本的Cloudera Hue之间的界面对比(图文详解)
不多说,直接上干货! 为什么要写这么一篇博文呢? 是因为啊,对于Hue不同版本之间,其实,差异还是相对来说有点大的,具体,大家在使用的时候亲身体会就知道了,比如一些提示和界面. 安装Hue后的一些功能 ...
- 【JAVA】判断当前日期是否在时间点内
public static boolean isInDate(Date date, String strDateBegin, String strDateEnd) { SimpleDateFormat ...
- Disruptor入门
一.什么是 Disruptor Disruptor是一个高性能的异步处理框架,或者可以认为是最快的消息框架(轻量的JMS),也可以认为是一个观察者模式实现,或者事件-监听模式的实现,直接称disrup ...
- Python3 中使用sys.argv详解
#/usr/bin/env python #coding:utf-8 import sys # print(sys.argv[1]) def readFile(filename): "&qu ...
- ResNet 论文研读笔记
Deep Residual Learning for Image Recognition 原文链接 摘要 深度神经网络很难去训练,本文提出了一个残差学习框架来简化那些非常深的网络的训练,该框架使得层能 ...
- http server 简单实现
本blog主要是模仿http server的实现,使得客户端使用浏览器访问server所指定的目录. 当访问的为一个目录时, 则列出改目录下的所有文件 当访问的是文件时,则下载文件到本地 本log仅仅 ...
- .1-浅析webpack源码之webpack.cmd
此系列随时可能断更,毕竟我是解释型源码分析…… tips:本系列源码版本为3.10.0 尝试看过Spring的源码,有点烧脑,所以还是重回JS吧! 在配置完环境变量后,可以通过webpack指令进行打 ...
- AutoMapper项目实践
本次示例,我们单独创建一个 AutoMapperService 的项目,用于放置映射配置文件,映射注册方法,映射公共方法. 1.映射配置文件 用于配置源实体到目标实体的映射 public class ...
- SQL Server T—SQL 语句【查】
一 查询数据(关键字:select) (1)简单查询 select * from 表名 ——查全表 select 列名 from 表名 select ...
- (转).net平台下垃圾回收机制
引言:使用c++进行编程,内存的处理绝对是让每个程序设计者最头疼的一块了.但是对于.net平台下使用c#语言开发系统,内存管理可以说已经不算是问题了.在.net平台下CLR负责管理内存,CLR中的垃圾 ...