2021年10月30日 星期六

LimeJS : Tainted canvases may not be exported

2021年10月30日 星期六

有人通報我的 HTML5「投籃高手」下載在本機以後不能玩,試了一下,哇!如果選了對的答案,真的就卡住不能繼續玩;而答錯反而沒事。觀察了一下,應該就卡在答對時的回饋動畫,會出現以下的錯誤訊息:


frame.js:132 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.



出現錯誤的指令則是使用了「lime.fill.Frame」來截取籃網圖片檔案當回饋動畫的影格。利用錯誤訊息當關鍵字,找到的資料大多說是圖形檔案在本機存取時 crossOrigin 的問題。建議都是圖片載入前設定「crossOrigin」的屬性為「Anonymous」。所以再追了一下 LimeJS 載入圖片的原始碼是在 lime/src/fill/image.js 中。不過,如果將圖片設定了:


.crossOrigin = 'Anonymous';


問題好像更大了,每個載入圖片的地方都出現類似下面的錯誤訊息:


Access to image at 'file:///C:/ ......' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.



簡單的說,在 Chrome 裡,設定 crossOringin 根本無法用在本機的檔案。不過,上面的方法雖然有錯誤訊息,程式倒是可以正常運作。

可是咱們對有錯誤訊息這件事就是在意,所以又把前面改過的東西通通改回來。最後是將製作籃網變形動畫的兩個 PNG 圖片手動以 base64 編碼後,設定給兩個變數,利用傳變數的方式給「lime.fill.Frame」建立影格。

結果查了一下 blog 中的舊文,原來這個問題在 2016 就遇過了,也是用預先把圖檔編碼的方式解決的;下一回還是先找找舊文的好,以免繞一大圈又繞回原點。


相關文章



0 意見:

張貼留言

 
© 2009. Design by Pocket