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

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项目.每件事都可以帮助您解决方向问题.您可以在此处看到在线演示.

您可以使用以下代码:

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个有效值用于方向,请参见下面的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