背景
業(yè)務(wù)開發(fā)遇到一個需求問題，有一類圖片在投放的時候是會被客戶端的一些功能區(qū)域遮擋或者裁剪查库，所以在審核平臺時需要通過一個蒙版覆蓋在原圖上，以判斷是否可以滿足審核條件澄者。
圖片是原圖抚笔，審核平臺會將原圖和對應(yīng)的蒙版圖通過canvas合成為一張圖給審核員進(jìn)行審核扶认。
現(xiàn)象：圖片量很大的時候，整個頁面會很卡塔沃，并且點(diǎn)擊預(yù)覽也要等2s左右才會顯示蝠引，體感很卡。
原因：canvas繪制比較消耗性能蛀柴，所以加載比較卡螃概。合成線程阻塞js主線程，導(dǎo)致用戶點(diǎn)擊預(yù)覽比較卡
一鸽疾、怎么解決
兩個方向
- 一是在canvas方案上優(yōu)化吊洼，用離屏canvas 和webworker，減少canvas繪制阻塞的時間制肮。
- 二是推翻canvas方案冒窍，無需繪制，使用css和js計算圖片大小和位置使得二者重疊豺鼻，營造類似效果综液。
優(yōu)缺點(diǎn)
方案一
優(yōu)點(diǎn)：
- canvas繪制時間縮短，加載卡頓減少
- 圖片預(yù)覽組件無感知儒飒，可以隨意放縮拖拽
- 圖片定位谬莹、大小不會有問題
缺點(diǎn)
- 點(diǎn)擊圖片預(yù)覽還會卡
方案二
優(yōu)點(diǎn)：
- 不使用canvas，繪制時間可以忽略
- 僅加載圖片一次
缺點(diǎn)
- 因?yàn)槭莾蓮垐D通過css疊加桩了，所以圖片預(yù)覽組件需要正確預(yù)覽就要用js和css協(xié)同做定位大小附帽，放縮也要有特殊邏輯存在，可能會導(dǎo)致預(yù)期之外的圖片預(yù)覽錯誤
- 小圖也需要定制蒙版
- 下載時需要做特殊邏輯井誉，用canvas繪制后再下載蕉扮，邏輯復(fù)雜
二、解決方案
采用方案一颗圣，方案一比較穩(wěn)定喳钟，方案二如果出錯會直接影響圖片呈現(xiàn)的內(nèi)容，影響質(zhì)量在岂。
可以在此基礎(chǔ)上進(jìn)行分組顯示荚藻，懶加載。這樣預(yù)覽的時候也不會卡頓洁段。
