javascript - HTML Canvas 。我的图像只有一半被翻转

Question

我一直在尝试翻转 Canvas 上的图像。我会翻转整个上下文，但这会使一切倒退，我只是应用这适用于一些图像。

有问题的图像是 Canvas 的完整尺寸，即WIDTH 和 HEIGHT 来自。

图像翻转部分的功能在这里。基本上图像是绘制到离屏 Canvas (_buffer_ctx)，然后使用 drawImage将其添加到最终场景中。

// Load images and draw to _buffer_ctx
// ...

let img = this._buffer_ctx.getImageData( 0, 0, WIDTH, HEIGHT );

const IMG_WIDTH  = img.width;
const IMG_HEIGHT = img.height;
const SCAN_WIDTH = IMG_WIDTH / 2;

let out = this._buffer_ctx.createImageData( IMG_WIDTH, IMG_HEIGHT );

const ELEMENTS_PER_PIXEL = 4;

for ( let y = 0; y < IMG_HEIGHT; ++y )
{
  for ( let x = 0; x < SCAN_WIDTH; ++x )
  {
    let p_near = (               x   + y * SCAN_WIDTH ) * ELEMENTS_PER_PIXEL;
    let p_far  = ( ( IMG_WIDTH - x ) + y * SCAN_WIDTH ) * ELEMENTS_PER_PIXEL;

    for ( let e = 0; e < ELEMENTS_PER_PIXEL; ++e )
      out.data[ p_far + e ] = img.data[ p_near + e ];
  }
}

this._buffer_ctx.putImageData( out, 0, 0 );

// Use main_ctx.drawImage( _buffer_ctx, ... )
// ...

我遇到的问题是只有图像的上半部分被翻转。

这里有一些图片来演示我的意思:

更新

我注意到只有一半的图像被翻转，所以我尝试将高度乘以二。这得到了我想要的结果。

const IMG_HEIGHT = img.height * 2; // Just this line.

这对我来说似乎很奇怪，因为 getImageData 函数和离屏 Canvas 都使用未相乘的高度。离屏 Canvas 是使用 document.createElement 创建的，其 width 和 height 属性设置为与屏幕 Canvas 相同的值。 WIDTH 和 HEIGHT 常量也从同一位置获取它们的值。

我一开始确实认为这是因为 Canvas 缩小为图像，但宽度也发生了变化，但效果却没有成倍增加，所以我很难理解为什么我只需要乘以高度值。

Answer 1

经过一些困惑，看起来@AgataB 是正确的。我使用 SCAN_WIDTH 来查找像素索引的 y 分量。

代码还存在一些其他问题。

这是修复后的版本。

let img = this._buffer_ctx.getImageData( 0, 0, WIDTH, HEIGHT );
let out = this._buffer_ctx.createImageData( img );

const IMG_WIDTH  = img.width;
const IMG_HEIGHT = img.height; // Don't need to multiply by two.
const SCAN_WIDTH = IMG_WIDTH  / 2;

const ELEMENTS_PER_PIXEL = 4;

for ( let y = 0; y < IMG_HEIGHT; ++y )
{
  let y_part = y * IMG_WIDTH;
  // Use IMG_WIDTH instead of SCAN_WIDTH so that we get the correct
  // y component. - @AgataB's comment.

  for ( let x = 0; x < SCAN_WIDTH; ++x )
  {
    let x_near = x;
    let x_far  = ( IMG_WIDTH - ( x + 1 ) ); 
    // When calculating the x component of the far pixel index we
    // should add 1 to x. The array is 0 based.

    let p_near = ( x_near + y_part ) * ELEMENTS_PER_PIXEL;
    let p_far  = ( x_far  + y_part ) * ELEMENTS_PER_PIXEL;

    for ( let e = 0; e < ELEMENTS_PER_PIXEL; ++e )
    {
      let near = p_near + e;
      let far  = p_far  + e;

      out.data[ far  ] = img.data[ near ];
      out.data[ near ] = img.data[ far  ];

      // Make sure that we set the left pixels of the output
      // image. This was why only half the image was being drawn
      // when I tried what @AgataB said.
    }
  }