uniapp 图像旋转
图像旋转的基本原理
在UniApp中实现图像旋转通常涉及对图像数据的处理或CSS变换。旋转可以通过修改图像的transform属性或使用Canvas API直接操作像素数据实现。
使用CSS实现图像旋转
通过CSS的transform属性可以轻松实现图像的旋转效果。这种方法适用于静态或简单的动态旋转需求。
<template>
<view>
<image
src="/static/example.jpg"
style="transform: rotate(45deg); width: 200px; height: 200px;"
></image>
</view>
</template>通过调整rotate中的角度值（如45deg）可以控制旋转的幅度。动态旋转可以通过绑定数据实现：
<template>
<view>
<image
:style="{ transform: `rotate(${rotationAngle}deg)` }"
src="/static/example.jpg"
></image>
<button @click="rotateImage">旋转图片</button>
</view>
</template>
<script>
export default {
data() {
return {
rotationAngle: 0
};
},
methods: {
rotateImage() {
this.rotationAngle += 90; // 每次点击旋转90度
}
}
};
</script>使用Canvas实现高级旋转
对于需要精确控制像素或复杂操作的场景，可以使用Canvas API。以下是一个完整的Canvas旋转示例：
<template>
<view>
<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
<button @click="drawRotatedImage">绘制旋转图像</button>
</view>
</template>
<script>
export default {
methods: {
drawRotatedImage() {
const ctx = uni.createCanvasContext('myCanvas');
const imagePath = '/static/example.jpg';
// 加载图像
uni.getImageInfo({
src: imagePath,
success: (res) => {
const { width, height } = res;
const centerX = 150; // Canvas中心点X
const centerY = 150; // Canvas中心点Y
const rotationAngle = Math.PI / 4; // 45度弧度值
ctx.translate(centerX, centerY);
ctx.rotate(rotationAngle);
ctx.drawImage(imagePath, -width/2, -height/2, width, height);
ctx.draw();
}
});
}
}
};
</script>关键点说明：
translate将原点移动到旋转中心rotate接受弧度值（Math.PI/4等于45度）drawImage时需调整坐标以中心为基准
服务端旋转处理
对于大图像或需持久化旋转结果的场景，建议使用服务端处理：
- 上传图像到服务器
- 使用后端语言（如Node.js、Python）的图形库处理旋转
- 返回处理后的图像地址
Node.js示例（使用Sharp库）：
const sharp = require('sharp');
sharp('input.jpg')
.rotate(90)
.toFile('output.jpg');性能优化建议
- 对于频繁旋转操作，建议使用CSS硬件加速（添加
will-change: transform） - Canvas操作大量像素时，考虑使用离屏Canvas
- 大图像旋转前应先压缩或缩放尺寸
平台兼容性说明
- 微信小程序：Canvas API存在差异，需使用
wx.createCanvasContext - H5端：支持完整的CSS3和Canvas标准
- App端：性能最佳，但需注意内存管理
以上方法可根据具体需求选择，CSS旋转适合简单UI效果，Canvas适合精确控制，服务端处理适合高质量结果保存。
