如果需要使用javascript旋轉圖像

我有一個預覽位置可以在上傳前顯示圖像的預覽，問題是當您從手機中選擇圖像時，它會出現側面。如果需要旋轉圖像，我該如何旋轉圖像？如果需要使用javascript旋轉圖像

我的JavaScript來顯示預覽：

<script type="text/javascript"> 

function readURL(input) { 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 

       reader.onload = function (e) { 
        $('#blah') 
         .attr('src', e.target.result) 

       }; 

       reader.readAsDataURL(input.files[0]); 
      } 
     } 

</script>

和HTML

<img src="images/Your_Picture_Here.png" alt="" title="" class="prod_image" id = "blah"/>

來源

2014-02-17 BluGeni

我建議你看一看所謂JavaScript-Load-Image GitHub的項目應用它。每件事都可以幫助你解決方向問題。有一個在線演示，你可以看到here。

你可以使用代碼如下：

document.getElementById('file-input').onchange = function (e) { 
    var loadingImage = loadImage(
     e.target.files[0], 
     function (img) { 
      document.getElementById("blah").src = img.toDataURL(); 
     }, 
     {orientation: 1} 
    ); 
    if (!loadingImage) { 
     // Alternative code ... 
    } 
};

請注意選擇orientation: 1，讓您的圖像以及旋轉。

沒有爲取向EXIF 8個有效值，請參閱下面的字母F的8個不同的值：

1  2  3  4  5   6   7   8 

000000 000000  00 00  0000000000 00     00 0000000000 
00   00  00 00  00 00  00 00   00 00  00 00 
0000  0000 0000 0000 00   0000000000 0000000000   00 
00   00  00 00 
00   00 000000 000000

來源

2014-02-17 22:12:06 morgul

我試過了，它幾乎可以工作！但是我可以將圖像放入身體的底部，進入我的身份證。當我做'document.getElementById（「blah」）。appendChild（img）;'什麼也沒有發生.. – BluGeni

@BluGeni嘗試'document.getElementById（「blah」）。src = img;'而不是'document.body .appendChild（img）;' – morgul

我得到'[object％20HTMLCanvasElement] 404（Not Found）'那個 – BluGeni

一個偉大的方式來做到這一點是：讓瀏覽器做。您使用CSS/HTML5而不是Javascript。

.image_rotated_by_90 { 
    transform: rotate(90deg) translateY(-100%); 
    -webkit-transform: rotate(90deg) translateY(-100%); 
    -ms-transform: rotate(90deg) translateY(-100%); 
}

您可以將類image_rotated_by_90動態添加到js中的旋轉圖像。做

$('#my_image').addClass('image_rotated_by_90');

來源

2014-02-17 20:36:02 poitroae

''＃不是類，它是一個ID。你想'.image_rotated_by_90'。 –

@aoeu所以我將代碼添加到我的CSS我需要引用它？或如何讓它工作？ – BluGeni

@BluGeni我添加了一個片段 – poitroae

如果需要使用javascript旋轉圖像

回答

相關問題