LimeJS : frame.js Failed to execute 'toDataURL'

LimeJS 的 lime.fill.Frame 可以讓我們擷取一張圖片中的某一部份，這個功能搭配 lime.animation.KeyframeAnimation 可以很方便的製作某一角色的動畫。不過，不知自何時起，Chrome 在載入本機的圖片時，會出現以下的錯誤訊息：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

追了 frame.js 中的程式，錯誤發生在要把原始大圖擷取小塊給 canvas 時的這一段：

var contents = this.ctx.canvas.toDataURL("image/png")

如果同一支程式放到網路上，並不會發生這種情形。這又是基於安全考量的 CORS 政策所造成的，Chrome 擋掉了將「file://」來源的圖片切割給 canvas。

本來試著照網路找到的方式解決，上有人提到設定圖片的 crossOrigin 為 Anonymous 即可過關。來來回回試了很多次，浪費了不少時間，均沒有成功。

一不做，二不休，把圖檔直接轉為用 base64 編碼，再給 lime.fill.Frame 用，比較快啦！

圖片轉 base64 編碼可以利用這個網站：

• https://www.base64-image.de/

我把轉好的圖片資料設定給變數，再丟給 lime.fill.Frame 去用，類以底下的內容：

var imageBird1 = 'data:image/png;base64,iVBORw0........';
var imageBird2 = 'data:image/png;base64,iVBORw0........'; 

var birdAni = new lime.animation.KeyframeAnimation().setDelay(.15).setLooping(true);
birdAni.addFrame( new lime.fill.Frame(imageBird1,0, 0,173,89));
birdAni.addFrame( new lime.fill.Frame(imageBird2,0, 0,173,89));
bird.runAction(birdAni);

這樣子就可以製作簡單的二格動畫了。