前一陣子因為想幫「HTML5 FUN 數學小白板」加上匯出成圖片的功能，找到了一個名為「html2canvas」的工具，試了一下，滿強的一個工具，利用 JavaScript 將網頁中，指定的元件整個分析後，輸出成 cavas，我只要加上轉成 PNG 圖片的程式，就完全符合我的需求；於是決定花一點時間研究 html2canvas 就好，不用花很多時間從最底層研究起。
html2canvas 可以在這個網址中找到：
在沒有加任何選項的情形下，用著，用著，發現幾個問題：
- 如果帶有圖片(非使用 DataURL)時， 在本機無法順利匯出，最後要將 canvas 使用 dataURL() 轉為 base64 編碼的資料時，會出現類似這樣的錯誤訊息「DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.」。
- 因為「HTML5 FUN數學小白板」的圖片是放在 GitHub 中，而程式是在 Google Blogger 中執行，會有「跨域」存取圖片的問題(CORS)，所以原有的圖片空白一片。
- 如何讓 html2canvas 自動跳過某些地方不輸出？
- 「HTML5 FUN數學小白板」中的骰子元件，只有六點可以輸出成圖片，其它點數在輸出結果中，都只有空白一片。
第一個問題應該只有我會遇到，因為數學小白板都放在網路中執行，不會有本機存取圖片的問題。以前是一不做二不休，直接將要用的圖片通通轉成 Base64URI 的格式 ，就能避掉 Tainted 的問題，在考慮要不要將數學小白板的16張圖捨圖檔，直接轉資料。
第二個「跨域」CORS 的問題，因為 GitHub 並沒有禁止跨域存取，所以只要在 html2canvas 中啟用「useCORS」的選項，將它設為 true 即可解決；後面的測試中，可以比較一下，有勾選「useCORS」，跟沒勾選，擷取的結果中，沒有小狗的圖案就知道該選項的效果。
第三個問題，如何跳過某些地方不輸出？html2canvas 的說明中有提到，我們可以將不想要放在輸出(擷取)結果中的物件，加上名為「data-html2canvas-ignore」的屬性，這樣子，它就會自動跳過該內容。底下的測試中，可以用勾不勾選「包含圖片上方的標題」來控制要不要出現在小狗上方那行「html2canvas 網頁擷(戳)圖測試」的標題字。
第四個骰子元件空白一片的問題，html2canvas 的功能說明中有提到「transform (Limited support)」，而骰子的動畫及結果呈現，正是使用 transform 所製造的效果。空白的部份可以使用選項設定「"foreignObjectRendering": true」，但它並沒有正確地顯示內容。沒關係，山不轉，路轉，路不轉，人轉；修改了骰子的程式，在擲骰子的動畫播畢，將原有的內容變完全透明，然後再加一張最後結果的點數圖片，完全地過渡，畫面有顯示，使用 html2canvas 匯出的結果也看得到骰子(不完美的大概是位置稍偏右下方一點點)。
來玩一下，並比較不同選項，輸出結果的不同吧！
html2canvas 網頁擷(戳)圖測試
啟用選項
由第2層開始擷取(不含橙色框)
擷取整個網頁的內容
發表文章
沒有留言:
張貼留言