canvas 镜像翻转

1,756 阅读1分钟

用摄像头进行拍照的时候发现了图片是镜像的,故网上找到两种镜像翻转方式。

通过canvas自带的画布方法进行翻转

ctx.clearRect(00, canvas.width, canvas.height);//清除画布
//位移来做镜像翻转
ctx.translate(210+ posx * 20);
ctx.scale(-11); //左右镜像翻转
//ctx.translate(0, 160 + posy * 2);
//ctx.scale(1, -1); //上下镜像翻转
ctx.drawImage(img, 0021080);

像素点的镜像翻转方法

//竖向像素反转
function imageS(sourceData, newData) {
  for (var i = 0, h = sourceData.height; i < h; i++) {
    for (var j = 0, w = sourceData.width; j < w; j++) {
      newData.data[i * w * 4 + j * 4 + 0] =
        sourceData.data[(h - i) * w * 4 + j * 4 + 0];
      newData.data[i * w * 4 + j * 4 + 1] =
        sourceData.data[(h - i) * w * 4 + j * 4 + 1];
      newData.data[i * w * 4 + j * 4 + 2] =
        sourceData.data[(h - i) * w * 4 + j * 4 + 2];
      newData.data[i * w * 4 + j * 4 + 3] =
        sourceData.data[(h - i) * w * 4 + j * 4 + 3];
    }
  }
  return newData;
}

//横向像素反转
function imageH(sourceData, newData) {
  for (var i = 0, h = sourceData.height; i < h; i++) {
    for (j = 0, w = sourceData.width; j < w; j++) {
      newData.data[i * w * 4 + j * 4 + 0] =
        sourceData.data[i * w * 4 + (w - j) * 4 + 0];
      newData.data[i * w * 4 + j * 4 + 1] =
        sourceData.data[i * w * 4 + (w - j) * 4 + 1];
      newData.data[i * w * 4 + j * 4 + 2] =
        sourceData.data[i * w * 4 + (w - j) * 4 + 2];
      newData.data[i * w * 4 + j * 4 + 3] =
        sourceData.data[i * w * 4 + (w - j) * 4 + 3];
    }
  }
  return newData;
}

//具体操作
var img1 = ctx.getImageData(0021080);
var img2 = ctx.getImageData(0021080);
ctx.putImageData(imageS(img2, img1), 0, 0);  //上下翻转
// ctx.putImageData(imageH(img2, img1), 0, 0);//左右翻转

通过位移进行翻转,下载的图片是空白的,这个还未找到问题。

通过像素进行翻转确实可以成功。

ps: canvas如果是加载img标签,需要等图片加载完成后,方可对其进行操作。