如果需要，使用javascript旋转图像

I have a preview spot to show a preview of the image before uploading, the problem is when you choose an image from your phone it appears sideways. How can I rotate the image if it needs to be rotated?

我有一个预览点，可以在上传之前显示图像的预览，问题是当您从手机中选择图像时，它会出现在侧面。如果需要旋转图像，如何旋转图像？

my javascript to show the preview:

我的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>

and the html

和HTML

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

2 个解决方案

#1

I would suggest you to take a look at the github project called JavaScript-Load-Image. Every thing is there to help you out with your orientation problem. There is an online demo that you can see here.

我建议你看一下名为JavaScript-Load-Image的github项目。每件事都可以帮助您解决方向问题。您可以在此处看到在线演示。

You could use code as follow:

您可以使用以下代码：

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

Please note the option orientation: 1 to make your image well rotated.

请注意选项方向：1可使图像旋转良好。

There is 8 valid values in EXIF for the orientation, see below the letter F for the 8 different value:

EXIF中有8个有效值用于方向，请参见下面的8个不同值的字母F：

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

#2

A great way to do it is: let the browser do it. You use CSS / HTML5 instead of Javascript.

一个很好的方法是：让浏览器做到这一点。您使用CSS / HTML5而不是Javascript。

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

You can append the class image_rotated_by_90 dynamically to your rotated images in js. Apply it by doing

您可以将类image_rotated_by_90动态地附加到js中的旋转图像。通过这样做来应用它

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

#1