exif.js html图片旋转,exif.js 实现图片旋转到正常

下载exif.js

npm install exif-js --save

引入exif.js

import EXIF from 'src/utils/exif-js';

//旋转图片到正常

const _rotateImg = (imgFile) => {

return new Promise((resolve, reject) => {

EXIF.getData(imgFile, function () {

let exifTags = EXIF.getAllTags(this);

let reader = new FileReader();

reader.readAsDataURL(imgFile);

reader.onload = e => {

let imgData = e.target.result;

// 8 表示顺时针转了90

// 3 表示转了 180

// 6 表示逆时针转了90

if (

exifTags.Orientation == 8 ||

exifTags.Orientation == 3 ||

exifTags.Orientation == 6

) {

//翻转

//获取原始图片大小

const img = new Image();

img.src = imgData;

img.onload = function () {

let cvs = document.createElement('canvas');

let ctx = cvs.getContext('2d');

//如果旋转90

if (

exifTags.Orientation == 8 ||

exifTags.Orientation == 6

) {

cvs.width = img.height;

cvs.height = img.width;

} else {

cvs.width = img.width;

cvs.height = img.height;

}

if (exifTags.Orientation == 6) {

//原图逆时针转了90, 所以要顺时针旋转90

ctx.rotate(Math.PI / 180 * 90);

ctx.drawImage(

img,

img.width,

img.height,

-img.height,

img.width,

img.height

);

}

if (exifTags.Orientation == 3) {

//原图逆时针转了180, 所以顺时针旋转180

ctx.rotate(Math.PI / 180 * 180);

ctx.drawImage(

img,

img.width,

img.height,

-img.width,

-img.height,

img.width,

img.height

);

}

if (exifTags.Orientation == 8) {

//原图顺时针旋转了90, 所以要你时针旋转90

ctx.rotate(Math.PI / 180 * -90);

ctx.drawImage(

img,

img.width,

img.height,

-img.width,

img.width,

img.height

);

}

resolve(cvs.toDataURL('image/png'));

}

else {

resolve(imgData);

}

});

}

exif.js html图片旋转,exif.js 实现图片旋转到正常相关推荐

exif.js html图片旋转,解决图片显示 Exif.js更改图片的显示方向
没什么文字直接上代码 //这是一个解决exif更改脱方向的一个js文件 // 应用前先npm install exif-js --save或者直接引入exif-js 调用方法 // let baseD ...
js获取图片的EXIF，解决图片旋转问题
相信大家在做项目的时候会遇到在canvas里加入图片时,图片发生90°,180°的旋转.当时的你肯定时懵逼的,为毛. 其实这就是图片的EXIF搞的鬼. 什么是EXIF 简单来说,Exif 信息就是由数 ...
JS获取图片的EXIF信息+纠正图片方向
前端图片处理碰到的一个离奇 bug , 关于图片的 EXIF 信息,特地记录下来 . 然后使用一下代码可以获取Orientation信息,并纠正Orientation带来的图片旋转问题 // from ...
html5+php调用android手机图片,html5+exif.js+canvas+php实现手机上传图片，图片损坏无法打开...
上传图片,图片损坏无法打开,图片路径也是正确的, function selectFileImage(fileObj) { var file = fileObj.files['0']; //图片方向角 ...
vue 创建图片坐标点_利用vue+fabric.js获取图片坐标，并实现图片拖拽、旋转、拉伸等功能...
什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具. ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
在web中如何调整上传过的图片方向 (exif)
前提: 相机中拍的照片放到web上不会自动识别方向,如有些竖向显示的照片放到web上横向显示.这些照片在windows上是正确显示的.但是web不会自动旋转照片到正确方向.下面我们通过两种方法来实现这 ...
图片裁剪的js有哪些（整理）
图片裁剪的js有哪些(整理) 一.总结一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...
php exif信息,php如何给jpg图片写入exif信息？
在写一个php把图片方向根据exif旋转过来的功能,功能是做好了,但是旋转之后的图片文件exif信息都没了,因为我用imagejpeg重写了图片,请问怎么把exif写回去? 贴一下我旋转图片的代码: ...
Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大 ...

exif.js html图片旋转,exif.js 实现图片旋转到正常

exif.js html图片旋转,exif.js 实现图片旋转到正常相关推荐

最新文章

热门文章