Exif.js图片旋转修正的方法
本文实例为大家分享了Exif.js图片旋转修正的具体方法，供大家参考，具体内容如下
上传后图片旋转修正
测试流程
上传 -> base64展示 -> 获取旋转值 -> 修正 -> 修正后展示 -> 转换blob和file文件供其他功能调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<title>测试图片旋转</title>
</head>
<body>
<input type="file" id="test" onchange="upload(event)">
<hr>
图片展示：
<img src="" id="img">
<hr>
旋转值：
<div id="rotateval"></div>
<hr>
canvas（旋转修正后）:
<canvas id="canvas" width="100%" height="80%"></canvas>
<script src="exif.js"></script>
<script>
function upload(e) {
var file = e.target.files;
var reader = new FileReader();
reader.onload = function(e) {
var res = reader.result;
document.getElementById("img").setAttribute('src', res);
EXIF.getData(file[0],
function() {
var Orientation = EXIF.getTag(this, 'Orientation');
document.getElementById('rotateval').innerHTML = Orientation;
if (Orientation) {
var image = new Image();
image.src = res;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
expectHeight = 1200;
expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = "800px"; //expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
switch (Orientation) {
case 6: //需要顺时针（向左）90度旋转
rotateImg(this, 'left', canvas);
break;
case 8: //需要逆时针（向右）90度旋转
rotateImg(this, 'right', canvas);
break;
case 3: //需要180度旋转
rotateImg(this, 'right', canvas); //转两次
rotateImg(this, 'right', canvas);
break;
}
function rotateImg(img, direction, canvas) {
//alert(img);
//最小与最大旋转方向，图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.height;
var width = img.width;
//var step = img.getAttribute('step');
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
uploadfile(canvas);
}
}
}
});
}
reader.readAsDataURL(file[0]);
}
function uploadfile(canvas) {
let src = canvas.toDataURL("image/png"); //这里转成的是base64的地址，直接用到img标签的src是可以显示图片的
//转成Blob对象
function dataURItoBlob(dataURI) { //图片转成Buffer
//atob() 方法用于解码使用 base-64 编码的字符串。
//base-64 编码使用方法是 btoa() 。
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
}
var blob = dataURItoBlob(src);
console.log('二进制对象：');
console.log(blob);
//转成File对象
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
var file_b = dataURLtoFile(src, 'test.png');
var formData = new FormData();
var columnName = 'img';
formData.append(columnName, file_b);
formData.append("filetype", file_b.type);
console.log('文件对象：');
console.log(file_b);
}
</script>
</body>
</html>
解决图片自动旋转问题
exif.js
用于从图像文件中读取EXIF元数据的JavaScript库。
您可以在浏览器中的图像上使用它，从图像或文件输入元素。
检索EXIF和IPTC元数据。这个包也可以在AMD或CommonJS环境中使用。
注意:EXIF标准仅适用于.jpg和.tiff图像。
这个包中的EXIF逻辑基于EXIF标准v2.2 (JEITA CP-3451，包含在这个repo中)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./jquery-1.7.2.min.js"></script>
<script src="./exif.min.js"></script>
</head>
<body>
<img src="1.jpg" id="J-logo"/>
<script type="text/javascript">
var getor = function() {
EXIF.getData(document.getElementById("J-logo"),
function() {
var aaa = EXIF.getAllTags(this);
var orp = EXIF.getTag(this, 'Orientation');
if (orp == 1) {
$("#J-logo").css("transform", "rotate(0deg)");
} else if (orp == 3) {
$("#J-logo").css("transform", "rotate(180deg)");
} else if (orp == 6) {
$("#J-logo").css("transform", "rotate(90deg)");
} else if (orp == 8) {
$("#J-logo").css("transform", "rotate(270deg)");
}
});
}
setTimeout('getor()', 1);
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript图片旋转效果实现方法详解
在Canvas API中,上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法: void rotate(in float angle); // 按给定的弧度顺时针旋转angle rotate()方法旋转的中心始终是canvas的原点.如果要改变旋转中心,需要使用translate方法. 我们可以将绘制的图形每隔一定的时间间隔后,旋转一定的角度重新绘制一次,这样就可以得到旋转的动画效果. 1．旋转的扇叶 将一个梯形按顺时针旋转90°的方式绘制4次,可以绘制出一
-
javascript结合canvas实现图片旋转效果
我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果.本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果.我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转. HTML 我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转. <div id="tool">
-
JS实现3D图片旋转展示效果代码
本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c
-
JavaScript如何处理移动端拍摄图片旋转问题
本文实例为大家分享了js移动端拍摄图片旋转的具体代码,供大家参考,具体内容如下 第一步:引入exif-js <script src="https://cdn.jsdelivr.net/npm/exif-js@2.3.0/exif.min.js"></script> 第二步: /** * 处理图片文件(处理移动端拍摄图片旋转问题) * fileObj.file 图片文件独享 * fileObj.resolution 在指定图片格式为 image/jpeg 或 im
-
js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. 这个图片放大,缩小和旋转,我采用canvas画布这个来做的,核心点就在js中去控制鼠标状态及事件. 我先给大家展示一下效果图. 鼠标移到画布范围内就会出现下方的操作栏,每次以90度选择. 1.在引入js的时候一定要注意了,由于在使用画布canvas时,需要等图片加载完成后才可以执行画布里的内容.j
-
JS实现图片旋转动画效果封装与使用示例
本文实例讲述了JS实现图片旋转动画效果封装与使用.分享给大家供大家参考,具体如下: 核心封装代码如下: //图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined) { opts[i] = SearchAnim.DEFAULTS[i]; } } this.opts = opts; this.timer = null; this.elem = document.
-
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法.分享给大家供大家参考,具体如下: 推荐一个图片旋转插件,用于浏览相册时,旋转图片. 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <script type="text/javascript"> $(document).ready(function () { $("#images").rotate(45); var value = 0 $("#images
-
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type
-
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
本文实例为大家展示了图片旋转.鼠标滚轮缩放.镜像.切换图片多重效果,提供了详细的代码,分享给大家供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <meta charset="utf-8" /> <!--<script type="
-
js实现图片旋转的三种方法
1 使用jQueryRotate.js实现 示例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1 { width: 800px; height: 600px; background-color: #ff0; position: absolute; } .imgRotate { widt