镜像网络摄像头图像的右半部分

Question

我看到你之前用镜像画布帮助大卫。 Canvas - flip half the image

我有类似的问题，希望也许你可以帮助我。 我想在我的网络摄像头画布上应用相同的镜像效果，但不是左侧，我想拍摄图像的右半部分，将其翻转并应用到左侧。

这是您为David发布的代码。它也适用于我的摄像头cancas。现在我试图改变它，以便它适用于另一方，但不幸的是我无法得到它。

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

}

Answer 1

即使您所依赖的接受答案使用的是imageData，也绝对没有用处 Canvas允许使用drawImage及其变换（缩放，旋转，平移）来执行许多操作，其中之一是将画布安全地复制到自身上。
优点是它比rgb组件处理图像更容易和方式更快。

我会让你阅读下面的代码，希望它的评论和清晰 小提琴在这里：

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

一个输出示例 - 我还拿了一座山，一座加拿大人:-) - ：

原文：

输出：

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