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

【问题标题】：rotate image if needed with javascript如果需要，使用 javascript 旋转图像
【发布时间】：2014-02-19 01:52:58
【问题描述】：

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

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

【解决方案1】：

我建议你看看名为 JavaScript-Load-Image 的 github 项目。每件事都可以帮助您解决方向问题。有在线demo可以看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 个有效的方向值，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

【讨论】：

我试过了，它几乎可以工作了！但是我可以让图像进入我的 id 图像被放在身体的底部。当我做document.getElementById("blah").appendChild(img); 时，什么都没有发生..
@BluGeni 试试document.getElementById("blah").src = img; 而不是document.body.appendChild(img);
我得到[object%20HTMLCanvasElement] 404 (Not Found)
好的，我刚刚重新阅读了此功能的文档。使用选项orientation 时似乎返回了一个画布。所以这应该有效：document.getElementById("blah").src = img.toDataURL();。很抱歉，我无法自己测试。
@morgul 重新定位图像后，如何在输入字段中替换它，以便将更改后的图像提交到表单中？

【解决方案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%);
}

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

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

【讨论】：

# 不是一个类，它是一个 id。你想要.image_rotated_by_90。
@aoeu 所以我将代码添加到我的 css 我需要引用它吗？或者我如何让它工作？
@BluGeni 我添加了一个 sn-p
@aoeu 好的，这行得通！但由于旋转，它把我的图像移到了右边？
这个答案不起作用，因为当我不是从手机上传图片时，它仍然会旋转它。我不想总是旋转。我需要确定它是否需要旋转。