如果需要使用javascript旋转图像

BluGeni 发表于 Dev

布鲁吉尼

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

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

服务天堂

我建议您看一下名为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个有效的方向值，请参见字母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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。