在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

主要引用了：

        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 2:img.RotateFlip(RotateFlipType.RotateNoneFlipX);//horizontal flipbreak;case 3:img.RotateFlip(RotateFlipType.Rotate180FlipNone);//right-topbreak;case 4:img.RotateFlip(RotateFlipType.RotateNoneFlipY);//vertical flipbreak;case 5:img.RotateFlip(RotateFlipType.Rotate90FlipX);break;case 6:img.RotateFlip(RotateFlipType.Rotate90FlipNone);//right-topwidth = height;height = ow;break;case 7:img.RotateFlip(RotateFlipType.Rotate270FlipX);break;case 8:img.RotateFlip(RotateFlipType.Rotate270FlipNone);//left-bottomwidth = height;height = ow;break;default:break;}}

转载于:https://www.cnblogs.com/sunShineJing/p/10021608.html

在web中如何调整上传过的图片方向 (exif)相关推荐

java通过struts实现web中的文件上传
单文件上传 fileupload.jsp <%@ page language="java" import="java.util.*" pageEncodi ...
JS中使用FormData上传文件、图片的方法
参考博客:http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.h ...
ajax表单图片,js中使用ajax上传一个带有图片的表单数据
function save() { var formData = new FormData(); if( $('#file')[0].files.length>0){ formData.appe ...
web渗透之文件上传漏洞知识总结
一.文件上传漏洞思路: 第一步: 首先看中间件:因为第一步看中间件就是确定是否存在解析漏洞(学习整理几种解析漏洞的对应版本,有些低版本有解析漏洞,有些高版本就没有.)中间件版本确定了,解析漏洞就确定了 ...
IIS 6和IIS 7 中设置文件上传大小限制设置方法，两者是不一样的
在IIS 6.0中设置文件上传大小的方法,只要设置httpRuntime就可以了 <system.web><httpRuntime executionTimeout="36 ...
在Struts 2中实现文件上传
前一阵子有些朋友在电子邮件中问关于Struts 2实现文件上传的问题, 所以今天我们就来讨论一下这个问题. 实现原理 Struts 2是通过Commons FileUpload文件上传.Commons ...
web安全之文件上传漏洞攻击与防范方法
一. 文件上传漏洞与WebShell的关系文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行.这里上传的文件可以是木马,病毒,恶意脚本或者WebShell等.这种攻击方式是最为直接和有效 ...
想说爱你不容易 | 使用最小 WEB API 实现文件上传（Swagger 支持）
前言上回,我们使用最小 WEB API 实现文件上传功能(<想说爱你不容易 | 使用最小 WEB API 实现文件上传>),虽然客户端访问是正常的,但是当打开 Swagger 页面时,发 ...
jsp servlet示例_Servlet和JSP中的文件上传示例
jsp servlet示例使用Servlet和JSP将文件上传到服务器是Java Web应用程序中的常见任务. 在对Servlet或JSP进行编码以处理文件上传请求之前,您需要了解一点有关HTML和 ...

在web中如何调整上传过的图片方向 (exif)

在web中如何调整上传过的图片方向 (exif)相关推荐

最新文章

热门文章