如何在HTML5 Canvas上翻转和旋转图像

Question

我正在构建一个Electron应用程序，它可以在工业打印机上显示批量打印的图像，而且我遇到了图像翻转/被镜像的问题。

这是我的代码，用于确定图像是应该翻转，旋转还是两者都有。

  _createClass(Image, null, [{
    key: 'drawRotatedImage',
    value: function drawRotatedImage(canvas, image, angle, mirrorImage) {
       var context = canvas.getContext('2d');
      if (angle > 0) {
        context.rotate(angle * (Math.PI / 180));
      }
      if (mirrorImage === true) {
        context.scale(-1, 1);
        context.drawImage(image, -image.width, -image.height, image.width, image.height);
      } else {
        context.drawImage(image, 0, angle === 0 ? 0 : -image.height);
      }
      return canvas;
    }
  },

代码的第一部分识别图像是否需要旋转。这很好用。但是，对于不需要旋转的图像，“mirrorImage”功能无法正常工作。一切都在旋转的图像上完美运行。我错过了什么吗？任何人都可以帮忙，这让我疯了几个小时。

谢谢

Answer 1

value: function drawRotatedImage(canvas, image, angle, mirrorImage) {
    var context = canvas.getContext('2d');
    if (angle > 0) {
        context.rotate(angle * (Math.PI / 180));
    }
    if (mirrorImage === true) {
        if (angle > 0) {
            context.scale(-1, 1);
            context.drawImage(image, -image.width, -image.height, image.width, image.height);
        }
    } 

    if (mirrorImage === true) {
        if (angle < 1) {
            context.scale(-1, 1);
            context.drawImage(image, -image.width, 0, image.width, image.height);
        }
    } else {
        context.drawImage(image, 0, angle === 0 ? 0 : -image.height);
    }
    return canvas;
}