Question

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

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

Answer 1

我建议你看看名为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

Answer 2

一个很好的方法是：让浏览器执行此操作。您使用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');

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

2 个答案: