这篇文章主要介绍“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>关于“Exif.js图片旋转怎么修正”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
