javascript - 如何在 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;
}