前端解决图片在浏览器中旋转问题

在开始之前需要了解为什么在浏览器中图片会自动旋转，在一些相机设备中因手持方向的原因导致图片会有一个旋转角度，在浏览器中旋转角度被忽略了，导致图片看过去是旋转的

图片旋转如下

如图
1 正常
6 旋转90°
8 旋转-90°
3 旋转180°

既然知道了图片需要旋转的角度，那么只需要通过canvas旋转并绘制图片，然后将图片输出就行，这里需要借助exif-js获取图片的源信息，只需要判断 Orientation 然后旋转对应的角度，废话不多说上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{padding-left: 300px;}.preivew {width: 300px;}.preivew2 {width: 300px;}</style><!-- 这里采用cdn形式引入exif --><script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
</head><body><input type="file" accept="image/*" /><p>转换前</p><img class="preivew" /><p>转换后</p><img class="preivew2" />
</body></html><script>// 添加input事件监听document.querySelector('input').addEventListener('change', onFileChange)function onFileChange(event) {let file = event.target.files[0] // 得到file对象document.querySelector('.preivew').src = URL.createObjectURL(file) // 转换前的imgrotateImg(file).then(blob => {document.querySelector('.preivew2').src = URL.createObjectURL(blob) // 转换后的img// 上传获取到的blob对象// let fromData = new fromData()// fromData.appendChild('file',blob)// $.ajax({//     type: "method",//     url: "url",//     data: "data",//     dataType: "dataType",//     success: function (response) {//     }// });/**这里把转换后的blob对象下载在电脑上查看，实际开发中忽略*/const url = window.URL.createObjectURL(blob)const link = document.createElement('a')link.href = urllink.setAttribute('download', 'AAAAAA')document.body.appendChild(link)link.click()document.body.removeChild(link)window.URL.revokeObjectURL(url)})}function rotateImg(file) {return new Promise((resolve, reject) => {let img = new Image();img.src = window.URL.createObjectURL(file);img.onload = () => {// 获取图片源数据 上面已经引入EXIF全局变量EXIF.getData(img, function () {// 获取图片orientation值console.log(EXIF.getAllTags(this))let orientation = EXIF.getTag(this, "Orientation");let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");switch (orientation) {case 3: // 旋转180°canvas.width = img.width;canvas.height = img.height;ctx.rotate((180 * Math.PI) / 180);ctx.drawImage(img, -img.width, -img.height, img.width, img.height);break;case 6: // 旋转90°canvas.width = img.height;canvas.height = img.width;ctx.rotate((90 * Math.PI) / 180);ctx.drawImage(img, 0, -img.height, img.width, img.height);break;case 8: // 旋转-90°canvas.width = img.height;canvas.height = img.width;ctx.rotate((-90 * Math.PI) / 180);ctx.drawImage(img, -img.width, 0, img.width, img.height);break;default: // 没有源信息的图片和正常的图片是不需要旋转的canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0, img.width, img.height);break;}// 处理完返回 (这里返回都是被压缩的，根据实际情况更改正常的图片处理方式)canvas.toBlob(file => resolve(file), 'image/jpeg', 0.92)})}})}
</script>

看看效果

前端解决图片在浏览器中旋转问题相关推荐

前端下载图片在浏览器中
这篇文章很好:https://blog.csdn.net/weixin_44244857/article/details/105549543 使用了文章文中base64 方法 <el-butto ...
解决安卓微信浏览器中location.reload 或者 location.href失效的问题
解决安卓微信浏览器中location.reload 或者 location.href失效的问题参考文章: (1)解决安卓微信浏览器中location.reload 或者 location.href失 ...
Hbuilder中的图片在浏览器中无法显示
Hbuilder中的图片在浏览器中无法显示在尝试把它放到记事本中来操作时,发现图片的名字都太复杂了,于是又转场来到Hbuilder把图片重命名成简单的数字,一波操作后,再打开浏览器就可以了如果标题 ...
JSP中img标签图片在浏览器中不显示问题
在开发JSP工程中遇到一个问题,在Eclipse中可以看到<img>的图片,但在浏览器去看不到.<img>的src用的是绝对路径,如:E:/JSP/workspace/test ...
隐藏的图片在浏览器中的请求
图片在页面中一般会以两种形式出现:img元素或者背景图片. 那么在img或者使用背景图片的元素被隐藏之后,页面加载的时候浏览器会不会发送http请求加载图片呢? 注:隐藏分为两种情况(display: ...
vscode的插入的图片在浏览器中无法显示
图片可以正常打开,但在浏览器中无法显示,查了f12说是找不到定义,我是个小白,也不会处理,求求大佬解答,在此感谢不尽.
html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
前端解决图片跨域问题：net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin
前言项目中使用了从别的网站上面获取的图片url,在项目中展示报错 net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200 从network中可以看到有请求报CO ...
微信播放在服务器视频无法播放音乐,解决ios微信浏览器中audio和video音乐视频无法自动播放等问题...
产生问题的原因参考网址:点击对于自动播放的局限性,没有变通方案.正如前面所提及的,音频流只能从用户触摸事件加载.当针对移动版 Safari 进行开发时,重要的一点是要在必要时调整您的工作流,以适应 ...

前端解决图片在浏览器中旋转问题

前端解决图片在浏览器中旋转问题相关推荐

最新文章

热门文章