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

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

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

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

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

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

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

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

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

還好有Promise這個銀彈，我們可以輕松的實現(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
  }


  /**
   * 開始預(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)度變化的時候回調(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()
    }
  }
}

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

用起來也很簡單：

(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ù)加載就實現(xiàn)了。接下來我們看看字體的預(yù)加載，字體也是一種http靜態(tài)資源，也可以使用緩存，但在實現(xiàn)預(yù)加載上卻遠(yuǎn)沒有圖片這么簡單。

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

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

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

大概看了下webfontloader，代碼寫的比較凌亂，命名奇怪，注釋少、沒翻譯（