js实现图片翻转
实现图片翻转的JavaScript方法
使用JavaScript实现图片翻转可以通过CSS的transform属性或Canvas的drawImage方法。以下是两种常见方式：
使用CSS和JavaScript控制翻转
通过修改元素的transform样式实现水平或垂直翻转：
// 获取图片元素
const img = document.getElementById('myImage');
// 水平翻转
img.style.transform = 'scaleX(-1)';
// 垂直翻转
img.style.transform = 'scaleY(-1)';
// 同时水平和垂直翻转
img.style.transform = 'scale(-1, -1)';使用Canvas实现高级翻转
通过Canvas可以更灵活地控制翻转效果，并支持旋转角度：
function flipImage(src, horizontal = true, vertical = false) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
// 设置翻转参数
ctx.scale(
horizontal ? -1 : 1,
vertical ? -1 : 1
);
// 调整绘制位置
ctx.drawImage(
img,
horizontal ? -img.width : 0,
vertical ? -img.height : 0
);
// 将结果插入DOM
document.body.appendChild(canvas);
};
img.src = src;
}
// 调用示例
flipImage('image.jpg', true, false);动态切换翻转状态
结合事件监听实现交互式翻转：
const btnFlip = document.getElementById('flipBtn');
const img = document.getElementById('myImage');
let isFlipped = false;
btnFlip.addEventListener('click', () => {
isFlipped = !isFlipped;
img.style.transform = isFlipped ? 'scaleX(-1)' : 'scaleX(1)';
});注意事项
- CSS翻转性能较好，适合简单场景
- Canvas方案适合需要后续图像处理的场景
- 翻转后可能需要调整元素布局以避免位置偏移
- 对于
<img>标签，翻转不会影响原始图片数据
