关于 canvas 绘制图像的方向兼容处理

[yinxulai]

问题：

1. JS-SDK 在处理图像压缩时，使用 canvas 来获取图像数据，部分浏览器的 canvas 不会自动根据图像的 Orientation 信息对图像进行方向 校正，这可能导致与用户预期不一致。
   • 问题代码

参考讨论：

• 修复图片压缩缩放的 bug #521

参考资料

• whatwg#4495
• csswg-drafts#3799
• w3#the-image-orientation
• exif-orientation

[nighca]

补充下可能的做法：

1. 干掉 js-sdk 中当前基于 EXIF 信息来做校正的逻辑

   如果浏览器行为差异足够小的话

2. 根据当前浏览器行为判断是不是做校正

   可能的判断方式见 修复图片压缩缩放的 bug #521 (comment)

3. 干掉 js-sdk 目前提供的图片压缩功能

   如果有靠谱的第三方库可以做这个事情，我们没必要通过 js-sdk 再来提供一份

   随手查了几个：

   • https://github.com/fengyuanchen/compressorjs
   • https://github.com/Donaldcwl/browser-image-compression#readme

[yinxulai]

由于问题比较严重，所以我倾向先使用 《可能做法》的第一条，移除这个逻辑来使该功能恢复大部分的时候的可用状态
长期来看，客户端图片压缩非七牛的业务，也不在本 SDK 的业务范围，可以有计划的移除该功能，保持 SDK 的简洁。

[nighca]

@yinxulai 我没问题，不过建议先验证下

浏览器行为差异足够小

这个事情，至少看是不是 evergreen browser 都没有问题

[yinxulai]

测试情况

• 桌面端
  

• 移动端
  无

说明

• 每张快照包含 Img(左)Canvas（右）两块
• 图片中文字方向显示正确则说明浏览器已正确处理 Orientation，否则没有
• 测试图片地址：http://public.qiniu.oss.yinxulai.com/canvas-test.jpg

注：

• IE 10 flex 布局有点问题，不过问题不大
• macOS safari13 快照实在搞不出来

[nighca]

记一下结论：考虑到规范要求默认按 Orientation 信息对图片进行旋转后展示 & 主要浏览器的最新版本都已经实现；这里 js-sdk 不再做额外的处理，即，这里 的第 1 个做法

如果开发者希望兼容老旧浏览器，可以考虑自己实现图像压缩逻辑，或者通过其他第三方库（见 #522 (comment) ）来做，处理完成后再使用 js-sdk 进行上传