不同背景的浏览器对图片exif旋转信息的渲染不同。例如：当从iPhone以纵向模式拍摄图像并将图像上传到我的应用程序时，它看起来是旋转的。但是，我检查了我的每个设备的EXIF元信息图像，发现两个图像在方向属性中具有相同的值类型症状IOS13.3.1Version(Old)IOS13.4.1(New)问题根源Webkit浏览器会根据EXIF数据在您上传图片之前旋转图片，仅在较新版本的Chrome(81)和IOS13.4.1MobileSafari中受支持。这样一来，如果应用程序本身根据exif信息进行旋转，那么再渲染一次就会出现问题。相关bug链接https://bugs.chromium.org/p/c...解决方法是创建一张宽高为2x3的图片，使用img标签渲染，检查是否旋转，然后手它移到画布上进行手动旋转。具体加载图像方向//代码改编自//https://github.com/blueimp/JavaScript-Load-Image/blob/24eda0f970b69f681dd76f4ed04e3e041a9bc1fa/js/load-image-orientation.js#L67-L103Tbest$函数，imageOrientation){//黑+白3x2JPEG，具有以下元信息集：//-EXIF方向：6（逆时针旋转90°）//图像数据布局（B=黑色，F=白色）：//BFF//BBBvartestImageURL='data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA'+'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA'+'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE'+'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAIAAwMBEQACEQEDEQH/x'+'ABRAAEAAAAAAAAAAAAAAAAAAAAKEAEBAQADAQEAAAAAAAAAAAAGBQQDCAkCBwEBAAAAAAA'+'AAAAAAAAAAAAAABEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AG8T9NfSMEVMhQ'+'voP3fFiRZ+MTHDifa/95OFSZU5OzRzxkyejv8ciEfhSceSXGjS8eSdLnZc2HDm4M3BxcXw'+'H/9k='varimg=document.createElement('img')img.onload=function(){//检查浏览器是否支持自动图像方向：$.orientation=img.width===2&&img.height===3if($.orientation){varcanvas=document.createElement('canvas')canvas.width=canvas.height=1varctx=canvas.getContext('2d')ctx.drawImage(img,1,1,1,1,0,0,1,1)//检查源图像坐标（sX,sY,sWidth,sHeight）是否正确应用于自动定向图像，结果应该是//在白色不透明像素中（例如在Safari中）。//显示透明像素的浏览器（例如Chromium）无法正确裁剪//自动定向图像并需要解决方法，例如//首先将完整的源图像绘制到中间画布上。//请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=1074354$.orientationCropBug=ctx.getImageData(0,0,1,1).data.toString()!=='255,255,255,255'}if(cb)cb($,img,canvas)}img.src=testImageURL}相关修复代码源https://github.com/blueimp/贾...
