将照片从文件绘制到画布基于 EXIF 在 Chrome 中旋转

Question

Chrome 会根据 exif 数据从绘制到画布的文件输入中自动旋转任何图像。这很好，但 iOS 不这样做。有没有办法防止这种行为，所以我可以自己转换图像。通过我编写的修复程序，它可以在 iOS 上运行，禁用该修复程序可以在 Android 上运行……宁愿禁用/启用然后玩浏览器识别游戏。

我试过将图像的样式设置为 image-orientation: none; ....但这没有任何作用。还是转了。

编辑：我通过查看样式对象上的“imageOrientation”是否未定义或新创建的 img 标签上的空字符串来检测到这一点。也许不是一个完美的测试，但它适用于我测试的情况。不确定它是如何证明未来的。

Answer 1

这应该是未来的证明：

// returns a promise that resolves to true  if the browser automatically
// rotates images based on exif data and false otherwise
function browserAutoRotates () {
    return new Promise((resolve, reject) => {
        // load an image with exif rotation and see if the browser rotates it
        const image = new Image();
        image.onload = () => {
            resolve(image.naturalWidth === 1);
        };
        image.onerror = reject;
        // this jpeg is 2x1 with orientation=6 so it should rotate to 1x2
        image.src = 'data:image/jpeg;base64,/9j/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAYAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAAITAAMAAAABAAEAAAAAAAAAAABIAAAAAQAAAEgAAAAB/9sAQwAEAwMEAwMEBAMEBQQEBQYKBwYGBgYNCQoICg8NEBAPDQ8OERMYFBESFxIODxUcFRcZGRsbGxAUHR8dGh8YGhsa/9sAQwEEBQUGBQYMBwcMGhEPERoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoa/8IAEQgAAQACAwERAAIRAQMRAf/EABQAAQAAAAAAAAAAAAAAAAAAAAf/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAF/P//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAQUCf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Bf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEABj8Cf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8hf//aAAwDAQACAAMAAAAQH//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Qf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Qf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8Qf//Z';
    });
}

真正确定浏览器是否根据 exif 数据旋转的唯一方法：加载具有 exif 比率的图像，然后查看结果如何。