javascript - 如果需要使用 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 项目.每件事都可以帮助您解决定位问题。有在线演示可以看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