当前位置：首页 > JavaScript

js实现图片翻转

2026-04-04 06:31:22JavaScript

实现图片翻转的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);

动态切换翻转状态

结合事件监听实现交互式翻转：

js实现图片翻转

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)';
});