캔버스 - 이미지의 반을 뒤집기

Question

캔버스에 이미지 데이터가 있습니다. 이제 이미지의 왼쪽 절반을 반전하고 뒤집어 거울 효과처럼 오른쪽에 적용해야합니다. 이에서 예

: 여기에

:

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

:

내가 지금까지이있어 (I 준비 이미지 데이터를 가지고)

너비는 &입니다. 어떤 아이디어? 화상 데이터

현재의 화소가 화상의 좌측 절반에있는 경우 통해

Answer 1

1. 루프는 우측 위치로 복사

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

I 안식처 ' 이것을 테스트했지만, (다소간) 작동하거나, 적어도 어떻게해야하는지에 대한 아이디어를 제공해야합니다.