画布 - 翻转图像的一半

Question

我在画布上有一些图像数据，现在我需要拍摄图像的左半部分，将其翻转并将其应用到右侧，就像镜像效果一样。

示例，来自：

对此：

我到目前为止（我准备好了图像数据）：

ctx.drawImage(this, 0, 0, 960, 540);
var imgData = ctx.getImageData(0,0,960,540);
// loop through the data and apply mirror ??

宽度和宽度身高已知。有什么想法吗？

Answer 1

1. 循环浏览图像数据
2. 如果当前像素位于图像的左半部分，请将其复制到右侧的位置：

for(var y = 0; y < height; y++) {
    for(var x = 0; x < width / 2; x++) { // divide by 2 to only loop through the left half of the image.
        var offset = ((width* y) + x) * 4; // Pixel origin

        // Get pixel
        var r = data[offset];
        var g = data[offset + 1];
        var b = data[offset + 2];
        var a = data[offset + 3];

        // Calculate how far to the right the mirrored pixel is
        var mirrorOffset = (width - (x * 2)) * 4;

        // Get set mirrored pixel's colours 
        data[offset + mirrorOffset] = r;
        data[offset + 1 + mirrorOffset] = g;
        data[offset + 2 + mirrorOffset] = b;
        data[offset + 3 + mirrorOffset] = a;
    }
}

我没有对此进行测试，但它应该（更多或更少）工作，或至少让你知道如何做到这一点。