此次讀書日活動功能主要是：五個問題對應五個動畫互動頁面，答完5道題之後展示一段視訊（隨機從書架上抽出一本書的動畫效果），隨後進入結果頁面。

在結果頁需要做站內站外的分享互動，將結果頁面利用html2canvas轉成圖片，再將圖片分享到各個平臺。

開發過程中遇到的問題如下：

***html2canvas轉apng資源元素異常***

通過image標籤使用的apng動畫，當它播放完成之後，再使用html2canvas轉image元素，此時得到的只是apng動圖的第一幀靜態圖片而不是最後一幀，所以需要再播放完成之後將src替換成最後一幀圖片的url再使用html2canvas轉。

***html2canvas轉image元素時失效***

對於image元素，需要將其資源url import進來之後在dom中賦值到image元素的src上，寫在css裡不行。

***html2canvas會使當前頁面中autoplay的audio再次播放***

這是因為html2canvas會臨時遍歷建立一套當前頁面中所有的dom元素，再將轉換目標元素擇出來。解決辦法是：在呼叫html2canvas之前，將audio元素臨時移除掉autoplay屬性，執行完之後再加上autoplay屬性。

document.getElementById("WorldBookDayMusic").removeAttribute('autoPlay')

***在iOS移動端微信瀏覽器上，視訊和音訊無法播放，安卓端可以***

解法如下：

init = () => {
    if (this.refVideo) {
      this.refVideo.play()
      if (typeof WeixinJSBridge !== 'undefined') {
        WeixinJSBridge.invoke('getNetworkType', {}, e => {
          this.refVideo.play()
        })
      }
    }
  }

***在iOS手機上，H5頁面中audio的音量無法通過volume來設定***

解法如上：將音訊檔案本身的音量設定大些，這樣在audio中直接通過src使用就可。

*** 在安卓手機上，video視訊會閃現下預設播放圖示***

解法如下圖：加上 poster="noposter"即可

***在iOS 13.4版本上，html2canvas無效（無報錯無響應）***

解法：需要將html2canvas版本設定成 1.0.0-rc.4，即在package.json中 設定  "html2canvas": "1.0.0-rc.4"。但是這個版本在服務端渲染專案中會報 window is not defined錯誤，所以不能在頁面頂部import，在使用的地方import。

utils.js檔案

const importHtml2Canvas = () => import (/* webpackChunkName: "activityHtml2canvas" */ 'html2canvas')

const _ = ''

export {
  _ as default,
  importHtml2Canvas,
}

使用：

const html2canvas = await (await (importHtml2Canvas)()).default

***在APP內，進入活動結果頁面，點選分享呼叫客戶端分享協議後，再點選重新測試，再次進入結果頁時會再次觸發客戶端分享協議***

解法：

在didMount中呼叫getInitIframe方法，如下，將首次iframe的src存下來：

getInitIframe = () => {
    const {isIOS} = this.props
    if (isIOS && document.getElementsByTagName('iframe')[0]) {
      this.setState({iframeSrc: document.getElementsByTagName('iframe')[0].src})
    }
  }

點選重新測試按鈕時，執行

const {isIOS} = this.props
    if (isIOS && document.getElementsByTagName('iframe')[0]) {
      document.getElementsByTagName('iframe')[0].src = this.state.iframeSrc
    }