摘要：效果展示目前活動(dòng)還是在線狀態(tài)，這里是最后生成海報(bào)的效果，掃描二維碼就可以進(jìn)入頁(yè)面。最后生成圖片的時(shí)候使用，這個(gè)是隱藏的，用戶不可見(jiàn)，這樣還有一個(gè)優(yōu)點(diǎn)，最終生成的海報(bào)大小是固定的，跟手機(jī)屏幕大小無(wú)關(guān)。方案看著很簡(jiǎn)單，實(shí)現(xiàn)的時(shí)候各種細(xì)節(jié)問(wèn)題。

年后一直處于秣馬厲兵的狀態(tài)，上周接到了一個(gè)緊急需求，為38婦女節(jié)做一個(gè)活動(dòng)頁(yè)，主要功能是生成海報(bào)，第一次做這種需求，我也是個(gè)半桶水前端，這里將碰到的問(wèn)題、踩的坑，如何解決的分享給大家，講的不到位的地方還望斧正。

目前活動(dòng)還是在線狀態(tài)，這里是最后生成海報(bào)的效果，掃描二維碼就可以進(jìn)入頁(yè)面。

起初實(shí)現(xiàn)的方案是展示的時(shí)候直接使用canvas，計(jì)算手機(jī)屏幕大小，讓canvas充滿整個(gè)屏幕，用戶編輯完之后直接用展示的canvas生成圖片，最后發(fā)現(xiàn)這種形式很麻煩，碰到適配問(wèn)題，canvas計(jì)算起來(lái)比較麻煩。

最終方案，展示的時(shí)候使用html、css，這樣用戶看到的展示、編輯頁(yè)面適配起來(lái)容易。最后生成圖片的時(shí)候使用canvas，這個(gè)canvas是隱藏的，用戶不可見(jiàn)，這樣還有一個(gè)優(yōu)點(diǎn)，最終生成的海報(bào)大小是固定的，跟手機(jī)屏幕大小無(wú)關(guān)。

方案看著很簡(jiǎn)單，實(shí)現(xiàn)的時(shí)候各種細(xì)節(jié)問(wèn)題。

H5海報(bào)活動(dòng)，就像一個(gè)小型的APP，體驗(yàn)一定要好，最主要的就是資源預(yù)加載了，整個(gè)應(yīng)用大小有30個(gè)圖片，還有字體文件，一個(gè)字體文件就有3MB多，如何做好資源預(yù)加載很大程度上影響了這次活動(dòng)的體驗(yàn)。

圖片預(yù)加載的原理就是使用http協(xié)議中的緩存，這里主要指的是強(qiáng)緩存（協(xié)商緩存還要去服務(wù)器，有網(wǎng)絡(luò)交互）。在活動(dòng)首頁(yè)之前加個(gè)loading頁(yè)面，將所有用到的圖片加載一遍，等到后面加載的時(shí)候就只有幾ms。

圖片預(yù)加載，使用let image = new Image()創(chuàng)建一個(gè)圖片標(biāo)簽，在image.src中加入圖片鏈接，加載成功調(diào)用image.onload事件。一張圖片還好，大量圖片的話如何優(yōu)雅的做出進(jìn)度條呢？

還好有Promise這個(gè)銀彈，我們可以輕松的實(shí)現(xiàn)進(jìn)度條效果。

class Preloadedr {
  /**
   *
   * @param images array 要加載的圖片，數(shù)組
   * @param processCb function 回調(diào)函數(shù)，加載中進(jìn)度有變化就調(diào)用
   * @param completeCb function 回調(diào)函數(shù)，加載完成調(diào)用
   */
  constructor(images, processCb, completeCb) {
    this.imagesElement = []
    this.loaded = 0
    this.images = images
    this.total = images.length
    this.processCb = processCb
    this.completeCb = completeCb
  }


  /**
   * 開(kāi)始預(yù)加載緩存圖片
   *
   * @returns {Promise} Promise 包含所有圖片的promise
   */
  preloadImage() {
    let me = this
    let promises = []
    me.loadedAction()
    me.images.forEach((img) => {
      let p = new Promise((resolve, reject) => {
        let image = new Image()
        image.src = img
        this.imagesElement.push(image)
        image.onload = () => {
          me.loadedAction(img)
          resolve(image)
        }
        image.onerror = () => {
          resolve("error")
        }
      })
      promises.push(p)
    })

    return Promise.all(promises)
  }

  /**
   * 進(jìn)度變化的時(shí)候回調(diào)，private
   *
   * @param key string 加載成功的圖片地址
   */
  loadedAction(key) {
    if (key) {
      this.loaded++
    }
    this.processCb(this.total, this.loaded)
    if (this.total == this.loaded) {
      this.completeCb()
    }
  }
}

每個(gè)要加載的圖片都是一個(gè)Promise，將所有圖片Promise包裝為一個(gè)大的Promise，當(dāng)這個(gè)大的Promise狀態(tài)為fulfilled的時(shí)候，表明圖片加載完成。要注意，包裝圖片Promise的時(shí)候onerror也是返回成功，這是因?yàn)?b>Promise.all會(huì)包裝出一個(gè)新Promise，這個(gè)Promise只要出現(xiàn)一個(gè)失敗，就直接返回報(bào)錯(cuò)了，所以失敗了也返回成功（resolve），就算有少數(shù)圖片未加載成功也影響不大。

用起來(lái)也很簡(jiǎn)單：

(async () => {
  let imgLoader = new Preloadedr([
    "http://avatar-static.segmentfault.com/606/114/606114310-5c10a92c87f07_huge256",
    "http://image-static.segmentfault.com/203/994/2039943300-5c515b79c91f1_articlex",
  ], (total, loaded) => {
    console.log("process: 圖片" + Math.floor(100 * loaded / total) + "%")
  }, () => {
    console.log("complete: 圖片" + 100 + "%")
  })
  await imgLoader.preloadImage()
  console.log("加載完成")
})()

可以看到輸出如下：

process: 圖片0%
Promise?{}
process: 圖片50%
process: 圖片100%
complete: 圖片100%
加載完成

至此，圖片預(yù)加載就實(shí)現(xiàn)了。接下來(lái)我們看看字體的預(yù)加載，字體也是一種http靜態(tài)資源，也可以使用緩存，但在實(shí)現(xiàn)預(yù)加載上卻遠(yuǎn)沒(méi)有圖片這么簡(jiǎn)單。

字體預(yù)加載，沒(méi)有像Image那么方便的函數(shù)回調(diào)使用，查了下資料，有個(gè)document.fonts實(shí)驗(yàn)性的屬性，試了下基本支持，但在ios上可能會(huì)出現(xiàn)一點(diǎn)兒小問(wèn)題，加載過(guò)一次有緩存了，第二次加載時(shí)候onloadingdone事件可能不會(huì)觸發(fā)，另外這個(gè)屬性、事件還是一個(gè)實(shí)驗(yàn)性的屬性，瀏覽器支持程度未知，可能很差。

查了很多資料，無(wú)意中看到有人說(shuō)webfontloader這個(gè)項(xiàng)目通過(guò)一種比較trick的方法實(shí)現(xiàn)了，原理就是下面這兩句話：

不同字體，在將 fontSize 設(shè)置到很大的時(shí)候（比如300px），同一段文字，他展示的寬度是不一樣的。
給兩個(gè)div，同樣的文字內(nèi)容，第一段設(shè)置兩種字體，待加載字體首選，默認(rèn)字體備選，第二種只設(shè)置默認(rèn)字體，定時(shí)器去掃描，當(dāng)兩段文字長(zhǎng)度不同的時(shí)候就說(shuō)明新字體加載成功可使用。

大概看了下webfontloader，代碼寫(xiě)的比較凌亂，命名奇怪，注釋少、沒(méi)翻譯（