背景
业务开发遇到一个需求问题，有一类图片在投放的时候是会被客户端的一些功能区域遮挡或者裁剪，所以在审核平台时需要通过一个蒙版覆盖在原图上，以判断是否可以满足审核条件。
图片是原图，审核平台会将原图和对应的蒙版图通过canvas合成为一张图给审核员进行审核。
现象：图片量很大的时候，整个页面会很卡，并且点击预览也要等2s左右才会显示，体感很卡。
原因：canvas绘制比较消耗性能，所以加载比较卡。合成线程阻塞js主线程，导致用户点击预览比较卡
一、怎么解决
两个方向
- 一是在canvas方案上优化，用离屏canvas 和webworker，减少canvas绘制阻塞的时间。
- 二是推翻canvas方案，无需绘制，使用css和js计算图片大小和位置使得二者重叠，营造类似效果。
优缺点
方案一
优点：
- canvas绘制时间缩短，加载卡顿减少
- 图片预览组件无感知，可以随意放缩拖拽
- 图片定位、大小不会有问题
缺点
- 点击图片预览还会卡
方案二
优点：
- 不使用canvas，绘制时间可以忽略
- 仅加载图片一次
缺点
- 因为是两张图通过css叠加，所以图片预览组件需要正确预览就要用js和css协同做定位大小，放缩也要有特殊逻辑存在，可能会导致预期之外的图片预览错误
- 小图也需要定制蒙版
- 下载时需要做特殊逻辑，用canvas绘制后再下载，逻辑复杂
二、解决方案
采用方案一，方案一比较稳定，方案二如果出错会直接影响图片呈现的内容，影响质量。
可以在此基础上进行分组显示，懒加载。这样预览的时候也不会卡顿。
