我一直在尝试翻转 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 缩小为图像,但宽度也发生了变化,但效果却没有成倍增加,所以我很难理解为什么我只需要乘以高度值。
最佳答案
经过一些困惑,看起来@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.
}
}
关于javascript - HTML Canvas 。我的图像只有一半被翻转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38614364/