Javascript 通过手机加载时，画布图像将图像旋转90度

我正在尝试制作一个小的画布功能，它可以让你上传一张图片，并在上面添加一个覆盖层。我让它上传，在上面创建一个图像并下载，但当我试图通过手机上传图像时。它将图像旋转90度

我是不是遗漏了什么？在将图像添加到画布之前，我是否必须测试图像的大小并对其进行缩放

任何帮助都是很大的帮助，谢谢

  <style>
    .box{
        width: 300px;
        height: 300px;
        border: 1px solid blue;
        padding: 1em;
    }
    .wrap{
        width: 180px;
        height: 180px;
        margin: 0 auto;
        background: red;
        position: relative;
    }
</style>
        <div class="box">
        <div class="wrap">
            <canvas id="canvas" width="180" height="180"></canvas>
        </div>
        <br />
        <label>Image File:</label><br/>
        <input type="file" id="imageLoader" name="imageLoader"/>
        <br />
        <br />
        <a href="#" clss="buttonLink" id="downloadLink">Download!</a>
    </div>
    <script>


        $(document).ready(function() {
            //upload images.
            var imageLoader = document.getElementById('imageLoader');
            imageLoader.addEventListener('change', handleImage, false);
            //draw image.
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            //download link.
            var downloadLink = document.getElementById('downloadLink');

            //upload image.
            function handleImage(e){
                var reader = new FileReader();
                reader.onload = function(event){


            var img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');

                    var width = 180;
                    var height = 180;
                    img.onload = function(){

                    context.drawImage(img,0,0, width, height);
                    var imageObj = new Image();
                        imageObj.setAttribute('crossOrigin', 'anonymous');
                    imageObj.onload = function() {
                      context.drawImage(imageObj, 69, 50);
                    };
                        imageObj.src = icon.png';
                    }
                    img.src = event.target.result;
                }
                reader.readAsDataURL(e.target.files[0]);     
            };              
            //download link.
            downloadLink.onclick = function () {
                downloadLink.href = canvas.toDataURL();
                downloadLink.download = 'facebook';
            };
        });
    </script> 

.盒子{
宽度：300px；
高度：300px；
边框：1px纯蓝色；
填充：1em；
}
.包裹{
宽度：180px；
高度：180像素；
保证金：0自动；
背景：红色；
位置：相对位置；
}


图像文件：





$（文档）.ready（函数（）{
//上传图片。
var imageLoader=document.getElementById（'imageLoader'）；
imageLoader.addEventListener（'change'，handleImage，false）；
//画图像。
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
//下载链接。
var downloadLink=document.getElementById（'downloadLink'）；
//上传图片。
函数handleImage（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
setAttribute（'crossOrigin'，'anonymous'）；
var宽度=180；
var高度=180；
img.onload=函数（）{
绘图图像（img，0,0，宽度，高度）；
var imageObj=新图像（）；
setAttribute（'crossOrigin'，'anonymous'）；
imageObj.onload=函数（）{
背景。drawImage（imageObj，69,50）；
};
imageObj.src=icon.png'；
}
img.src=event.target.result；
}
reader.readAsDataURL（e.target.files[0]）；
};              
//下载链接。
downloadLink.onclick=函数（）{
downloadLink.href=canvas.toDataURL（）；
downloadLink.download='facebook'；
};
});

您需要读取EXIF数据并采取相应措施。 读取数据的示例库：

也已经回答了问题

同样来自另一个来源，这是您应该如何处理画布上的exif方向：

switch(orientation){
    case 2:
        // horizontal flip
        ctx.translate(canvas.width, 0);
        ctx.scale(-1, 1);
        break;
    case 3:
        // 180° rotate left
        ctx.translate(canvas.width, canvas.height);
        ctx.rotate(Math.PI);
        break;
    case 4:
        // vertical flip
        ctx.translate(0, canvas.height);
        ctx.scale(1, -1);
        break;
    case 5:
        // vertical flip + 90 rotate right
        ctx.rotate(0.5 * Math.PI);
        ctx.scale(1, -1);
        break;
    case 6:
        // 90° rotate right
        ctx.rotate(0.5 * Math.PI);
        ctx.translate(0, -canvas.height);
        break;
    case 7:
        // horizontal flip + 90 rotate right
        ctx.rotate(0.5 * Math.PI);
        ctx.translate(canvas.width, -canvas.height);
        ctx.scale(-1, 1);
        break;
    case 8:
        // 90° rotate left
        ctx.rotate(-0.5 * Math.PI);
        ctx.translate(-canvas.width, 0);
        break;
}