2016年12月18日 星期日

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 編碼可以利用這個網站:



我把轉好的圖片資料設定給變數,再丟給 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);

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

沒有留言:

張貼留言

 
© 2009. Design by Pocket