如果需要使用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旋转图像

回答

相关问题