HTML холст. Только половина моего изображения переворачивается

Question

Я пытаюсь перевернуть изображение на холсте. Я бы перевернул весь контекст , но все это обратило бы назад, и я применил только к некоторым изображениям.

Образцы, о которых идет речь, представляют собой полный размер холста, на котором находятся WIDTH и HEIGHT.

Изображение, переворачивающее часть функции, находится здесь. В основном изображение нарисовано на экранном холсте (_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, ...) 
// ... 

Проблема, с которой я сталкиваюсь, заключается в том, что только верхняя половина изображения переворачивается.

Вот некоторые изображения, чтобы продемонстрировать, что я имею в виду:

Update

я заметил, что только половина изображения была быть перевернуто, поэтому я попытался умножив высоту на два , Это дает мне желаемый результат.

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

Это мне кажется странным, как функция getImageData и выключения экрана холст и использовать unmultiplyed высоту. За пределами экрана холст создается с использованием document.createElement, и его свойства width и height имеют те же значения, что и на экране. Константы WIDTH и HEIGHT также получают свои значения из одного и того же места.

Сначала я подумал, что это было потому, что холст масштабируется до изображения вниз, но ширина также изменяется, и все же это работает без мультика, поэтому мне трудно понять, почему мне нужно только умножить значение высоты.

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. 
    } 
    }