HTML5キャンバスで画像を反転/回転する方法

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

}、