js实现图像垂直翻转

在JavaScript中，你可以通过HTML5的Canvas API来实现图像的垂直翻转。以下是简单的步骤：

1. 创建一个`HTML`元素用于显示canvas和图片：

<canvas id="flipCanvas"></canvas>
<img src="your-image-url" id="originalImage">

2. 加载图像并获取其原始宽度和高度：

const canvas = document.getElementById('flipCanvas');
const ctx = canvas.getContext('2d');
const img = document.getElementById('originalImage');

img.onload = function() {
    const originalWidth = img.width;
    const originalHeight = img.height;
};

3. 使用canvas进行绘制，并对图片进行垂直翻转：

function flipVertically(image) {
    // 翻转后的宽度不变，高度取反
    const flippedHeight = -image.height;

    // 画布大小设置为原图的尺寸
    canvas.width = originalWidth;
    canvas.height = flippedHeight + 'px'; // 注意这里height需要字符串形式

    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 将图片复制到画布中心位置
    ctx.translate(originalWidth / 2, flippedHeight / 2);
    ctx.rotate(Math.PI); // 旋转180度完成翻转
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
}

// 当图片加载完成后调用翻转函数
img.onload = () => {
    flipVertically(img);
};

现在，当你访问包含这个脚本的页面时，原始图片就会在canvas上垂直翻转显示。