旋轉並保存爲JavaScript的圖像

我正在寫一個web應用程序加載圖像和畫布上顯示（更確切地說，我正在寫一個使用HTML5/JavaScript的Tizen應用程序）。旋轉並保存爲JavaScript的圖像

我能正常加載圖像：

function loadImage(file) { 
    var img = new Image(); 
    img.src = file; 
    return img; 
}

一切工作正常，直到我開始得到的圖像顯示其在錯誤的方向。我弄清楚如何獲得EXIF和方向，我想知道如何改變上述功能來返回正確的圖像？

function loadImage(file) { 
    var img = new Image(); 
    img.src = file; 

    // Retrieve EXIF orientation (works fine) 
    ... 
    // What should I do here to rotate the img? 

    return img; 
}

我一直在四處尋找和其他人暗示繪製在畫布旋轉的圖像，但是這會導致很多的問題，在我的計算（x，y是其中沒有0，0，寬度和高度與畫布尺寸不一樣）。

來源

2015-12-04 Lim Thye Chean

實際上，你真的需要使用'canvas'旋轉。 –

無法旋轉圖像本身？ –

試試這個

<!DOCTYPE html> 
<html> 
<body> 
<button id="button" value="click here!">Click Here!</button> 
<div id="parentdiv"> 
<img id="image"      
src="https://d13yacurqjgara.cloudfront.net/users/71134/screenshots/1020838/save-icon.png" /> 
</div> 
<style> 
#parentdiv {width:820px;height:100px;} 
#parentdiv.rotate90,#container.rotate270 {width:100px;height:820px} 
#image { 
transform-origin: top left; /* IE 10+, Firefox, etc. */ 
-webkit-transform-origin: top left; /* Chrome */ 
-ms-transform-origin: top left; /* IE 9 */ 
} 
#parentdiv.rotate90 #image { 
transform: rotate(90deg) translateY(-100%); 
-webkit-transform: rotate(90deg) translateY(-100%); 
-ms-transform: rotate(90deg) translateY(-100%); 
} 
#parentdiv.rotate180 #image { 
transform: rotate(180deg) translate(-100%,-100%); 
-webkit-transform: rotate(180deg) translate(-100%,-100%); 
-ms-transform: rotate(180deg) translateX(-100%,-100%); 
} 
#parentdiv.rotate270 #image { 
transform: rotate(270deg) translateX(-100%); 
-webkit-transform: rotate(270deg) translateX(-100%); 
-ms-transform: rotate(270deg) translateX(-100%); 
} 
</style> 
<script> 
var angle = 0, img = document.getElementById('parentdiv'); 
document.getElementById('button').onclick = function() { 
angle = (angle+90)%360; 
img.className = "rotate"+angle; 
} 
</script> 

</body> 
</html>

來源

2015-12-04 04:46:34 Krishnaraj

嘗試：

img.style.transform = 'rotate(30deg)';

來源

2015-12-04 04:47:24 bob

試過img.style.transform ='rotate（180deg）';似乎沒有任何效果。 –

旋轉並保存爲JavaScript的圖像

回答

相關問題