前端加载七牛图片地址竖图变成横图问题

简介: 前端加载七牛图片地址竖图变成横图问题

我在开发的过程中上传了一张竖图到七牛,然后拿到七牛图片链接之后,img标签加载出来之后图片变成了横图,但是通过浏览器打开图片展示的确实是竖图。这就奇怪了,后面通过 七牛官网了解到 - imagemogr2 得到解决。

原来是图片的EXIF信息里面旋转有问题 可以通过图片EXIF查看器检查图片 ,有的相机拍摄出来的照片可能本来就因为格式问题是自带旋转的。


  • 没有带旋转的图片EXIF:

7af74b3af69a54bee01fac64109bea1f_05e20071af4e6b9fd921c5b72ba7a471.png


  • 有带旋转的图片EXIF:

f5eca88ca7c880c151a2d542e594c475_d9d2e21a9a1aa1dc882c02b9ea75ac47.png


注意 IFDO 里面的方向。


那么怎么解决这个问题呢,七牛的解决办法,其实就是在图片连接尾部添加 “?imageMogr2/auto-orient”。


例如链接:https://xxxxx.jpg?imageMogr2/auto-orient

在代码中可以通过字符串的形式进行拼接上去。


这样就可以解决七牛图片竖图边横图的问题了。


相关文章
|
2月前
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
231 5
|
2月前
|
缓存 前端开发 JavaScript
探索前端性能优化:从加载速度到用户体验的全面升级
探索前端性能优化:从加载速度到用户体验的全面升级
56 0
|
1月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
131 68
|
4月前
|
缓存 前端开发 JavaScript
解密前端性能优化:提升网页加载速度的关键策略
网页加载速度不仅影响用户体验,还对搜索引擎排名有直接影响。本文将深入探讨前端性能优化的多种策略,包括资源压缩与合并、延迟加载、CDN加速等。通过具体的优化方法和实际案例分析,读者将能够掌握提升网页性能的实用技巧,并能够在实际项目中有效地应用这些策略来实现更快的加载速度和更流畅的用户体验。
|
17天前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
59 5
|
1月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
33 4
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
19 1
|
1月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
42 3
|
1月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
48 2
|
2月前
|
前端开发
前端之图片操作
前端之图片操作