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

最新推荐文章于 2025-12-12 23:56:50 发布
最新推荐文章于 2025-12-12 23:56:50 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 阿里云 云计算 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mo3408/article/details/129672435
当在小程序中上传到阿里云的图片出现旋转问题时，可以使用OSS的`auto-orient`参数来解决。该参数允许指定图片是否按自适应方向旋转。需要注意的是，如果原图没有旋转参数，添加此操作不会生效。此外，应用`auto-orient`可能导致图片被重新压缩，造成尺寸变化。示例展示了如何通过URL、SDK或API设置参数来处理图片的自适应旋转。

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

参数说明

操作名称：auto-orient

参数说明如下：

参数 描述 取值
[value] 指定图片是否进行自适应旋转。 0、1
  • 0：保持原图方向，不进行自适应旋转。
  • 1：将图片进行自适应旋转
了解本专栏 订阅专栏 解锁全文 超级会员免费看
uniapp(全端兼容) - 详解前端阿里云OSS上传图片并添加水印功能，纯前端直传图片到阿里oss对象存储另外添加自定义水印，uniApp上传图像文件到OSS时给图片插入水印添加水印（无需后端服务）
高级前端工程师
11-01 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，阿里云oss对象存储，前端直传无需后端接口服务器，上传图片到阿里云oss，给图片添加水印后再传到oss上，文字水印，图片水印，uni-app实现阿里OSS直传，uniapp阿里云oss图片直接上传(不需要后端做签名)，uni-app上传图片到oss并在底部加入文字水印，uni-app上传图片并添加水印支持拍照单图片上传多图片上传并添加水印，uniapp选取相册中的照片并插入水印上传，各平台打开相机和相
一篇文章 - 轻松入门微信小程序
zyh1841474614的博客
01-10 4383
以前学习微信小程序开发时候的笔记,希望能对大家有帮助
阿里云OSS上传图片被自动旋转90℃的解决方案
大鱼吃小鱼7的博客
03-05 3518
由于拍摄的图片是横拍的, 上传的时候被自动旋转了, 像下面这样: 问题描述: 上传图片到阿里云OSS，再HTML标签使用OSS图片路径，展示的图片被自动旋转了；但是将图片图片路径直接浏览器打开，是原始没有旋转过的. 那么如何解决? 很简单, 只需要在图片链接中加上一个属性x-oss-process, 像下面这样: url链接加上?x-oss-process=image/resi...
微信小程序 图片旋转后上传
big_badwolf的博客
03-31 1723
今天遇到一个很有意思的问题，在开发电子签名的时候，生成的图片角度有问题，需要进行旋转。然而js里并没有旋转图片的api，所以突发奇想把canvas生成的图片再插入进一个新的canvas容器进行编辑旋转，来实现一样的效果。 代码如下 js //旋转图片，生成新canvas实例 rotate(cb){ const that = this; wx.createSelectorQuery().select('#handWriting2') .fields({ node: tr
自定义Hook-useSearchParam
臧小川的博客
02-20 556
/** * 跟踪浏览器的位置搜索参数。 * @param {string} useSearchParam 传递参数 search 名称 * @return {string} useSearchParam 相应 search 值 */
thinkphp 小程序图片上传时，部分手机图片旋转
从兄的博客
05-24 414
thinkphp 小程序或者APP上传图片时，部分手机会出现图片旋转问题，出现这种问题，可能出现的问题有前端上传插件问题，如果前端解决不了，只能后端进行图片处理。PHP函数：exif_imagetype exif_read_data获取图片信息，对获取到的图片信息进行判断处理图片（代码：）使用了php 的图片扩展：在php.ini文件中开启;
微信小程序：上传的图片显示旋转问题
xiaoyuer_2020的博客
09-07 6859
问题？ 开发中遇到微信小程序在上传照片后，会有一定概率旋转，查阅了资料之后，发现是和图片中携带的exif信息中的orientation这个参数有关。 小程序的页面实用webview渲染的，webview的图片渲染不会读取图片的exif信息，这个浏览器内核没支持，而小程序的预览图片wx.previewImage可以是因为客户端解析了exif信息。 解决办法 由于个别图片拍摄时候自带旋转信息，经过个人测试跟图片大小和后缀没关系，部分机型会在选择相册时候进行了上面那个旋转（图片带有多少度旋转就旋转多少度），上传
微信小程序--图片相关问题合辑
Dreawer微信小程序联盟
09-20 2963
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL：微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发：上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--
搭建自己的图片处理服务 — 智能裁剪、旋转、占位一站搞定
vfmqery的博客
11-05 1747
前言 前两天刚搭建了自己的博客，并写了一篇介绍性的文章：《极简博客搭建，搭建超级简单又好看》，这几天准备写点文章体验一下这款博客。发现不论是撰写文章还是展示效果，都非常符合我的品味，真是太棒了。 直到今天我上传了一张图片，于是便有了这篇文章。 因果 一般情况，我写一篇博客会直接上传图片到文章，有时上传的尺寸并不太适合在文章内显示。就有了打开 PS 或者截取一部分再上传，这就放慢了写博文的速度。我...
YOLOv8【第八章：特殊场景检测篇·第5节】一文搞懂，小目标检测专项技术突破！
最新发布
**My Coding Family**
12-12 1217
🏆 本文收录于 《YOLOv8实战：从入门到深度优化》 专栏。该专栏系统复现并梳理全网各类 YOLOv8 改进与实战案例（当前已覆盖分类 / 检测 / 分割 / 追踪 / 关键点 / OBB 检测等方向），坚持持续更新 + 深度解析，质量分长期稳定在 97 分以上，可视为当前市面上 覆盖较全、更新较快、实战导向极强 的 YOLO 改进系列内容之一。
微信小程序-图片放缩、旋转、裁剪 for 微信小程序
08-06
weCropper 图片放缩、旋转、裁剪 for 微信小程序，实现方式是canvas作图 使用方法 下载代码，在微信开发者工具中选择相应包路径，打开后可直接查看 说明 项目基础来自这位同学https://github.com/dlhandsome/we-cropper ，增加了旋转功能,优化了些细节。 本来打算做成如下效果（即有个半透明层）： 试过两种方法： 1）在canvas上增加遮罩。--然而小程序里canvas组件是由客户端创建的原生组件，它的层级是最高的。遮罩会被盖住。 2）两个canvas层叠。--在开发工具上好好的，到手机上就不行了。。 另外，由于touchMove绑定的函数里有canvas作图，会对手机性能消耗比较严重。推荐上传压缩图，函数节流等。（尽管如此，还是出现了卡顿。。） 目前只做成这样，凑合着用了。貌似微信以后会出图片裁剪的组件。或者将白俊杰https://github.com/baijunjie/PhotoClip.js 的做法搬到小程序上，这个可能会比较复杂了 最后 求个star^_^
关于实现图片旋转的一个小程序
05-04
通过TrackBar来控制图片旋转的速度！！
微信小程序内拖动图片实现移动、放大、旋转的方法
12-12
屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，X轴向右为正向左为负，Y轴向下为正向上为负（这点和数学上相反的）以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法 微信小程序这里提供了两个API wx.createContext() 创建并返回绘图上下文context对象 getActions 获取当前context上存储的绘图动作，对应wx.drawCanvas(object)中的actions clearActions 清空当前的存储绘图动作 wx.drawCanvas(object) 绘制 canvasId 画布标识，传入的cavas-id
微信小程序实现点击图片旋转180度并且弹出下拉列表
10-17
主要为大家详细介绍了微信小程序实现点击图片旋转180度并且弹出下拉列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于阿里云oss上传图片之后会被旋转解决办法
vvvvvv333333333的博客
04-30 1490
问题描述：正常的图片前端上传到oss成功之后的资源地址。在html上引用的时候被旋转了 oss资源地址直接在浏览器打开就不会旋转 问题原因：某些手机拍摄出来的照片可能带有旋转参数（存放在照片exif信息里面）。而oss资源上传之后会默认自适应方向 所以在img标签中图片就被旋转了。 解决办法：阿里云给出的API很详细的解答了问题：https://help.aliyun.com/document_detail/44691.html?spm=a2c4g.11186623.6.1160.1c5d149dByJ2
微信小程序 旋转图片Animation
banfapian8742的博客
07-31 633
最近制作TODO小程序想旋转图片来达到一秒走一下 首先在wxml定义一个图形 <view class="container"> <view class="page-body"> <view class="page-section"> <view class="animation-element-wrapper"> ...
关于阿里云oss上传图片之后会被旋转90度的解决办法
weixin_30567471的博客
12-17 1497
问题描述：正常的图片前端上传到oss成功之后的资源地址。在html上引用的时候被旋转了90度oss资源地址直接在浏览器打开就不会旋转问题原因：某些手机拍摄出来的照片可能带有旋转参数（存放在照片exif信息里面）。而oss资源上传之后会默认自适应方向所以在img标签中图片就被旋转了90度。 解决办法：阿里云给出的API很详细的解答了问题：https://help.aliyun.com/docume...
项目总结56：阿里云OSS上传的图片被自动旋转问题解决
weixin_45866907的博客
09-06 315
项目总结56：阿里云OSS上传的图片被自动旋转问题解决
小程序中解决图片旋转问题
zihao6的博客
10-16 5365
在一些相机设备中因手持方向的原因导致图片会有一个旋转角度，在图片加载后旋转角度被忽略了，导致图片看过去是旋转的， 小程序中不需要借助任何工具获取图片信息，通过wx.getImageInfo()获取orientation orientation值有四个 up 不需要旋转 down 旋转180度 left 旋转270度 right 旋转90度 小程序中处理图片旋转条件 需要在wxml...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑆箫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值