阿里云OSS上传图片被自动旋转90℃的解决方案

最新推荐文章于 2023-09-26 15:40:53 发布

大鱼吃小鱼7

最新推荐文章于 2023-09-26 15:40:53 发布

阅读量3.2k

点赞数

分类专栏： JavaScript知多少各种兼容性文章标签： javascript html5 vue.js 前端

本文链接：https://blog.csdn.net/qq_37210523/article/details/104676144

版权

由于拍摄的图片是横拍的, 上传的时候被自动旋转了, 像下面这样:

问题描述:

上传图片到阿里云OSS，再HTML标签使用OSS图片路径，展示的图片被自动旋转了；但是将图片图片路径直接浏览器打开，是原始没有旋转过的.

那么如何解决?

很简单, 只需要在图片链接中加上一个属性x-oss-process, 像下面这样:

url链接加上?x-oss-process=image/resize,w_100/auto-orient,1

<img class='image-bg' :src="info.liveImage ? (info.liveImage+'?x-oss-process=image/resize,w_100/auto-orient,1') :defaultImg" alt="">

阿里云文档:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大鱼吃小鱼7

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

在小程序中，发现上传阿里云的图片旋转了90度，那如何自适应方向呢？

03-20

944

您可以通过自适应方向参数，指定OSS内存储的原图是否按自适应方向旋转。本文介绍进行自适应方向旋转时所用到的参数及示例。

阿里云对象云存储oss

aliyunguojizhan的博客

11-23

551

对象云存储

1 条评论您还未登录，请先登录后发表或查看评论

项目总结56：阿里云OSS上传的图片被自动旋转问题解决

weixin_45866907的博客

09-06

253

项目总结56：阿里云OSS上传的图片被自动旋转问题解决

关于阿里云oss上传图片之后会被旋转解决办法

vvvvvv333333333的博客

04-30

1329

问题描述：正常的图片前端上传到oss成功之后的资源地址。在html上引用的时候被旋转了 oss资源地址直接在浏览器打开就不会旋转问题原因：某些手机拍摄出来的照片可能带有旋转参数（存放在照片exif信息里面）。而oss资源上传之后会默认自适应方向所以在img标签中图片就被旋转了。解决办法：阿里云给出的API很详细的解答了问题：https://help.aliyun.com/document_detail/44691.html?spm=a2c4g.11186623.6.1160.1c5d149dByJ2

OSS图片处理后为被旋转

qq_52652441的博客

11-18

477

概述本文主要介绍如何解决正常原图处理之后为被旋转。详细信息一般通过手机或者倒置相机等方式拍出来的照片其实已经旋转，带有旋转参数。具体参考https://help.aliyun.com/knowledge_detail/39624.html ...

关于阿里云oss上传图片之后会被旋转90度的解决办法

weixin_30567471的博客

12-17

1392

问题描述：正常的图片前端上传到oss成功之后的资源地址。在html上引用的时候被旋转了90度oss资源地址直接在浏览器打开就不会旋转问题原因：某些手机拍摄出来的照片可能带有旋转参数（存放在照片exif信息里面）。而oss资源上传之后会默认自适应方向所以在img标签中图片就被旋转了90度。解决办法：阿里云给出的API很详细的解答了问题：https://help.aliyun.com/docume...

解决oss视频上传后截取的图片被旋转问题

最新发布

咸鱼起码是条鱼

09-26

358

【代码】解决oss视频上传后截取的第一帧图片被旋转问题。

阿里云-对象存储服务OSS图片服务手册.pdf

10-10

综上所述，阿里云OSS图片服务IMG提供了一整套完善的图片处理功能，结合OSS强大的存储能力，为企业和个人提供了便捷、灵活的图片管理和处理解决方案。无论是简单的图片缩放还是复杂的样式应用，IMG都能轻松应对，助力...

阿里云-对象存储服务OSS图片服务手册-D.docx

10-10

总结来说，阿里云对象存储服务OSS结合图片服务IMG，为用户提供了强大的图片管理和处理能力，能够满足各种图片应用场景的需求，如网站、移动应用、电子商务平台等。通过灵活的API接口和预定义的样式，用户可以轻松地...

阿里云对象存储OSS用作网站静态文件加速的优势

qq_27528221的博客

02-07

2541

阿里云对象存储OSS（Object Storage Service）是一款海量、安全、低成本、高可靠的云存储服务，可提供99.9999999999%（12个9）的数据持久性，99.995%的数据可用性。多种存储类型供选择，全面优化存储成本。

七牛及阿里云OSS图片旋转问题

weixin_30737363的博客

09-19

350

七牛图片处理接口 imageMogr2 提供一系列高级图片处理功能，包括格式转换、缩放、裁剪、旋转等。imageMogr2 接口可支持处理的原图片格式有 psd、jpeg、png、gif、webp、tiff、bmp。（webp不支持动图）注意：imageMogr2 接口支持的最大 gif 帧数为 200，超过 200，处理结果只返回原图。 https://developer.qiniu....

Java解决IOS上传图片到OSS图片被旋转

一勺菠萝丶的博客

05-17

1313

前言在做项目中使用到OSS存储手机上传到服务器的图片, 但发现使用IOS手机进行竖着拍出的照片上传到OSS后出现了旋转的情况, 为了解决这个问题, 总结出一个工具类, 需要时也就是在将图片上传到OSS之前执行该工具类对图片进行旋转调整(注意该工具类执行一定要压缩图片之前, 否则图片信息丢失将无法旋转), 这样上传到OSS的图片就是正常的工具类 package com.welsee.tools;...

关于阿里云OSS上传图片之后会被旋转90度的解决办法

dgqvhtlwq472235338的博客

05-28

705

原文：https://www.cnblogs.com/wuhjbk/p/10133596.html 问题描述：正常的图片前端上传到oss成功之后的资源地址。在html上引用的时候被旋转了90度oss资源地址直接在浏览器打开就不会旋转问题原因：某些手机拍摄出来的照片可能带有旋转参数（存放在照片exif信息里面）。而oss资源上传之后会默认自适应方向所以在img标签中图片就被旋转了9...

[iOS]上传到阿里云OSS的图片处理以及视频获取第一帧图片

Gamin

01-23

7424

demo:https://download.csdn.net/download/u012881779/10933922 TO：YYWebImage 之所以有处理图片这需求，是因为我们后端返回的存在阿里云上的图片是原图，测试人员反映列表中图片加载很缓慢。上传到阿里云OSS的图片，阿里云提供了一些功能。这里我只用了图片缩放和图片旋转。缩放和旋转也可以同时处理，如："?x-oss-process=i...

ios拍照上传后图片旋转的问题

qq_39511525的博客

04-22

624

上传到oss的图片地址加上后缀 ?x-oss-process=image/resize,w_1200; // 网站中阿里云图片压缩参数这样添加可以解决微信拍照上传出现图片旋转的情况

关于img图片翻转负90度的问题

kaisens的博客

11-22

2321

参考链接:https://www.jianshu.com/p/442b5ad217b8 由于原作者把图片做了压缩,所以在这里我简化了一下(就是偷点懒) 前置: 1.我请求的是阿里的oss 需要在oss管理里添加跨域设置 2.exif.js 下载 js代码 /** * 判断图片角度并调整(针对手机拍照图片) 需要请求的图片地址允许跨域 * @param fileNameFull <img&...

利用阿里云oss的图像处理参数对csdn插入的图片进行调整

fatherofli的博客

05-13

1811

当我们在csdn上写博客的时候插入的图片都是默认格式而且很难进行修改，在排版的时候经常会很难受，比如像这样样例用图同时图片下方会有几行链接，我们用F12查看网页源码可以看出这是图片的地址https://img-blog.csdnimg.cn/a2299d2d1af24ae6ba975ef320bc940f.jpeg，在请教了同学之后我发现可以用阿里云oss的图像处理功能来对图片进行调整，下面简单介绍一下图片缩放首先我们在链接后面加上?x-oss-process=image/，官网上有不同的缩放方式

配置阿里云OSS图片缩略图

鲜衣怒马楼兰月

09-19

7746

OSS图片支持拼接url实现图片缩略图，配置如下：按百分比缩放： ?x-oss-process=image/resize,p_12 将原图指定按短边缩略 100x100 ?x-oss-process=image/resize,m_lfit,h_200,w_200 http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-pr...