前提: 相机中拍的照片放到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, '&nbsp;&nbsp;:&nbsp;&nbsp;<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)的更多相关文章

  1. python web中的文件上传与下载

    django 框架下 实现服务端的文件上传与下载: import jsonimport osimport uuid def attachment_upload(request): "&quo ...

  2. 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)

    1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...

  3. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  4. IIS 7 中设置文件上传大小的方法

    在IIS 6.0中设置文件上传大小的方法,就是配置如下节点: <system.web> <httpRuntime maxRequestLength="1918200&quo ...

  5. 基于spring-boot的web应用,ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

  6. umask设置导致的weblogic中的应用上传的文件没有权限打开

    去年,在公司的某一weblogic上部署的web应用上传文件后却没有读的权限.因为weblogic在Linux上部署,上传文件是mount到了一台安装了NFS的Windows Server上. 当时本 ...

  7. asp.net中使用swfupload上传大文件

    转载:http://www.cnblogs.com/niunan/archive/2012/01/12/2320705.html 花了一天多时间研究出来的,其实也就是网上下别人的代码然后再自己修修改改 ...

  8. JAVA Web 之 struts2文件上传下载演示(二)(转)

    JAVA Web 之 struts2文件上传下载演示(二) 一.文件上传演示 详细查看本人的另一篇博客 http://titanseason.iteye.com/blog/1489397 二.文件下载 ...

  9. JAVA Web 之 struts2文件上传下载演示(一)(转)

    JAVA Web 之 struts2文件上传下载演示(一) 一.文件上传演示 1.需要的jar包 大多数的jar包都是struts里面的,大家把jar包直接复制到WebContent/WEB-INF/ ...

随机推荐

  1. 全网最详细的大数据集群环境下多个不同版本的Cloudera Hue之间的界面对比(图文详解)

    不多说,直接上干货! 为什么要写这么一篇博文呢? 是因为啊,对于Hue不同版本之间,其实,差异还是相对来说有点大的,具体,大家在使用的时候亲身体会就知道了,比如一些提示和界面. 安装Hue后的一些功能 ...

  2. 【JAVA】判断当前日期是否在时间点内

    public static boolean isInDate(Date date, String strDateBegin, String strDateEnd) { SimpleDateFormat ...

  3. Disruptor入门

    一.什么是 Disruptor Disruptor是一个高性能的异步处理框架,或者可以认为是最快的消息框架(轻量的JMS),也可以认为是一个观察者模式实现,或者事件-监听模式的实现,直接称disrup ...

  4. Python3 中使用sys.argv详解

    #/usr/bin/env python #coding:utf-8 import sys # print(sys.argv[1]) def readFile(filename): "&qu ...

  5. ResNet 论文研读笔记

    Deep Residual Learning for Image Recognition 原文链接 摘要 深度神经网络很难去训练,本文提出了一个残差学习框架来简化那些非常深的网络的训练,该框架使得层能 ...

  6. http server 简单实现

    本blog主要是模仿http server的实现,使得客户端使用浏览器访问server所指定的目录. 当访问的为一个目录时, 则列出改目录下的所有文件 当访问的是文件时,则下载文件到本地 本log仅仅 ...

  7. .1-浅析webpack源码之webpack.cmd

    此系列随时可能断更,毕竟我是解释型源码分析…… tips:本系列源码版本为3.10.0 尝试看过Spring的源码,有点烧脑,所以还是重回JS吧! 在配置完环境变量后,可以通过webpack指令进行打 ...

  8. AutoMapper项目实践

    本次示例,我们单独创建一个 AutoMapperService 的项目,用于放置映射配置文件,映射注册方法,映射公共方法. 1.映射配置文件 用于配置源实体到目标实体的映射 public class ...

  9. SQL Server T—SQL 语句【查】

    一 查询数据(关键字:select) (1)简单查询        select * from 表名                    ——查全表 select 列名 from 表名 select ...

  10. (转).net平台下垃圾回收机制

    引言:使用c++进行编程,内存的处理绝对是让每个程序设计者最头疼的一块了.但是对于.net平台下使用c#语言开发系统,内存管理可以说已经不算是问题了.在.net平台下CLR负责管理内存,CLR中的垃圾 ...