ios版本小于13.4.1的手机需要前端对其调整图片方向，上传拍照照片总是方向不对

weAllThinking

已于 2024-03-21 10:50:34 修改

阅读量429

点赞数 7

CC 4.0 BY-SA版权

文章标签： ios 智能手机前端

于 2024-03-11 13:42:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42259940/article/details/136568932

文章讲述了如何在处理iPhone竖向拍摄照片时，使用JavaScript的canvasAPI确保图片在canvas上显示时不旋转，特别提及了针对不同iOS版本的适配方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这类iphone中手机竖着拿然后逆时针旋转90°才是正确的拍照姿势

这时候拍出来的照片展示在canvas中是不会被旋转的。如果以其他角度拍照时，就会发生旋转。

function imgToCanvasWithOrientation(img, width, height, orientation) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width=width
    canvas.height=height
    if (判断机型系统不高于ios13.4.1) {
        switch (orientation) {
            case 3:
                ctx.rotate(Math.PI)
                ctx.drawImage(img, -width, -height, width, height);
                break;
            case 6:
                ctx.rotate(0.5 * Math.PI)
                ctx.drawImage(img, 0, -height, width, height);
                break;
            case 8:
                ctx.rotate(3 * Math.PI / 2)
                ctx.drawImage(img, -width, 0, width, height);
                break;
            default:
                ctx.drawImage(img, 0, 0, width, height);
                break
        }
    }
    
    return canvas.toDataURL(“image/png”);
}