关于 canvas 绘制图像的方向兼容处理
yinxulai opened this issue · comments
Alain commented
问题:
JS-SDK
在处理图像压缩时,使用canvas
来获取图像数据,部分浏览器的canvas
不会自动根据图像的Orientation
信息对图像进行方向校正
,这可能导致与用户预期不一致。
参考讨论:
参考资料
Hanxing Yang commented
补充下可能的做法:
-
干掉 js-sdk 中当前基于 EXIF 信息来做校正的逻辑
如果浏览器行为差异足够小的话
-
根据当前浏览器行为判断是不是做校正
可能的判断方式见 #521 (comment)
-
干掉 js-sdk 目前提供的图片压缩功能
如果有靠谱的第三方库可以做这个事情,我们没必要通过 js-sdk 再来提供一份
随手查了几个:
Alain commented
由于问题比较严重,所以我倾向先使用 《可能做法》的第一条,移除这个逻辑来使该功能恢复大部分的时候的可用状态
长期来看,客户端图片压缩非七牛的业务,也不在本 SDK 的业务范围,可以有计划的移除该功能,保持 SDK 的简洁。
Hanxing Yang commented
Alain commented
测试情况
说明
- 每张快照包含
Img
(左)Canvas
(右)两块 - 图片中文字方向显示正确则说明浏览器已正确处理
Orientation
,否则没有 - 测试图片地址:http://public.qiniu.oss.yinxulai.com/canvas-test.jpg
注:
- IE 10 flex 布局有点问题,不过问题不大
- macOS safari13 快照实在搞不出来
Hanxing Yang commented
记一下结论:考虑到规范要求默认按 Orientation
信息对图片进行旋转后展示 & 主要浏览器的最新版本都已经实现;这里 js-sdk 不再做额外的处理,即,这里 的第 1 个做法
如果开发者希望兼容老旧浏览器,可以考虑自己实现图像压缩逻辑,或者通过其他第三方库(见 #522 (comment) )来做,处理完成后再使用 js-sdk 进行上传