如何在HTML5上翻轉和旋轉圖像Canvas

我正在構建一個Electron應用程序，它爲工業打印機上的批量打印設置圖像，並且存在圖像翻轉/被鏡像的問題。如何在HTML5上翻轉和旋轉圖像Canvas

這是我的代碼，它確定圖像是否應該翻轉，旋轉或兩者兼而有之。

_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」功能無法正常工作。一切都在旋轉的圖像上完美運行。我錯過了什麼嗎？任何人都可以幫忙，這讓我生氣了好幾個小時。

感謝

來源

2017-01-20 Adam McMahon

這是一個有點不清楚你想達到什麼。我假設你想要將圖像翻轉和/或旋轉到位？但在你的代碼中，圖像是圍繞畫布的原點旋轉的，而不是每個圖像的中心。 – Josh

更新。我終於設法修復它。我缺乏一個IF來說如果圖像處於0度（風景）並且需要被鏡像，那麼只是鏡像而不是旋轉。下面的代碼。 –

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

}，

來源

2017-01-20 15:39:53

修正了上面的代碼。謝謝 –

如何在HTML5上翻轉和旋轉圖像Canvas

回答

相關問題