最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Exif.js图片旋转修正代码方法
时间:2022-02-23 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下Exif.js图片旋转修正代码方法,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
上传后图片旋转修正
测试流程
上传 -> base64展示 -> 获取旋转值 -> 修正 -> 修正后展示 -> 转换blob和file文件供其他功能调用
this.naturalHeight && this.naturalWidth > 800) { expect; expectHeight = expectWidth * this.naturalHeight / this.naturalWidth; } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) { expect; expectWidth = expectHeight * this.naturalWidth / this.naturalHeight; } var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); canvas.; //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); }
解决图片自动旋转问题
exif.js
用于从图像文件中读取EXIF元数据的JavaScript库。
您可以在浏览器中的图像上使用它,从图像或文件输入元素。
检索EXIF和IPTC元数据。这个包也可以在AMD或CommonJS环境中使用。
注意:EXIF标准仅适用于.jpg和.tiff图像。
这个包中的EXIF逻辑基于EXIF标准v2.2 (JEITA CP-3451,包含在这个repo中)。
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- vue中将el-switch值true、false改为number类型的1和0解析 10-24
- Vue中的路由配置项meta使用解读 10-24
- SpringBoot自定义bean绑定解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24