GIF/PNG/JPG和WEBP/base64/apng圖片優(yōu)點(diǎn)和缺點(diǎn)整理
客戶端上動(dòng)態(tài)圖格式對(duì)比和解決方案
iSparta這個(gè)工具應(yīng)該有bug，生成的圖片在iphone上解析經(jīng)常會(huì)引起webview crush.
MAC下一個(gè)叫 APNGb的軟件生成的質(zhì)量比較穩(wěn)定，但是ios10.3.3系統(tǒng)有一些問題，無法識(shí)別動(dòng)圖，會(huì)卡在第一幀。
TweakPNG 查看圖片編碼的軟件
檢測是否支持 APNG
function checkApngSupport() {
return new Promise(resolve => {
let apngTest = new Image();
let ctx = document.createElement("canvas").getContext("2d");
apngTest.onload = function() {
ctx.drawImage(apngTest, 0, 0);
resolve(ctx.getImageData(0, 0, 1, 1).data[3] === 0);
};
apngTest.src =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACGFjVEwAAAABAAAAAcMq2TYAAAANSURBVAiZY2BgYPgPAAEEAQB9ssjfAAAAGmZjVEwAAAAAAAAAAQAAAAEAAAAAAAAAAAD6A+gBAbNU+2sAAAARZmRBVAAAAAEImWNgYGBgAAAABQAB6MzFdgAAAABJRU5ErkJggg==";
});
}
檢測支持 WEBP
一個(gè)討論
有人提到下面這個(gè)：
Google官方建議
另一個(gè)
Vue的一個(gè)JSON生成SVG 組件 確點(diǎn)是耗性能，gif直接是瀏覽器解析，SVG這種還有js的計(jì)算。 Github
