CODEWITHSUNDEEP
javascriptcanvas
user3653301
user3653301

Reputation: 13

Mirroring right half of webcam image

I saw that you have helped David with his mirroring canvas problem before. Canvas - flip half the image

I have a similar problem and hope that maybe you could help me. I want to apply the same mirror effect on my webcam-canvas, but instead of the left side, I want to take the RIGHT half of the image, flip it and apply it to the LEFT.

This is the code you've posted for David. It also works for my webcam cancas. Now I tried to change it, so that it works for the other side, but unfortunately I'm not able to get it.

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

}

Upvotes: 1

Views: 495

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

Even if the accepted answer you're relying on uses imageData, there's absolutely no use for that.
Canvas allows, with drawImage and its transform (scale, rotate, translate), to perform many operations, one of them being to safely copy the canvas on itself.
Advantages is that it will be way easier AND way way faster than handling the image by its rgb components.

I'll let you read the code below, hopefully it's commented and clear enough.
The fiddle is here :

http://jsbin.com/betufeha/2/edit?js,output

One output example - i took also a mountain, a Canadian one :-) - :

Original : enter image description here

Output : enter image description here

html 

<canvas id='cv'></canvas>

javascript

var mountain = new Image() ; 
mountain.onload = drawMe;
mountain.src  = 'http://www.hdwallpapers.in/walls/brooks_mountain_range_alaska-normal.jpg';

function drawMe() {
  var cv=document.getElementById('cv');
  // set the width/height same as image.
  cv.width=mountain.width;
  cv.height = mountain.height;
  var ctx=cv.getContext('2d');
  // first copy the whole image.
  ctx.drawImage(mountain, 0, 0);  
  // save to avoid messing up context.
  ctx.save();
  // translate to the middle of the left part of the canvas = 1/4th of the image.
  ctx.translate(cv.width/4, 0);
  // flip the x coordinates to have a mirror effect
  ctx.scale(-1,1);
  // copy the right part on the left part.
  ctx.drawImage(cv, 
  /*source */  cv.width/2,0,cv.width/2, cv.height,
  /*destination*/  -cv.width/4, 0, cv.width/2, cv.height);
  // restore context
  ctx.restore();  
}

Upvotes: 2

Related Questions