我們項目組基于createJS做了一個有意思的紅包雨活動(createJS赡若,canvas),項目快結(jié)束的時候睁冬,我們開始了生產(chǎn)環(huán)境的部署蝌诡,我們把所有的靜態(tài)資源都放到了七牛CDN上溉贿,本以為能夠使我們的canvas加載圖片得更快,結(jié)果意外發(fā)生了浦旱,在生產(chǎn)環(huán)境上顽照,報了這個錯
屏幕快照 2018-08-24 上午10.57.21.png
======================================================================
Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
======================================================================
這可難壞了我們前端的同學,一臉懵逼闽寡,怎么頁面的紅包點不了了代兵,每次去點都會報這個錯。
我們搞了半天爷狈,終于有了一些思路
原來我們在使用http://www.createjs.com/Docs/EaselJS/Bitmap.html
加載圖片的時候植影,原來開發(fā)的時候使用的是本地圖片,easeJS load 圖片的時候 在同源域名的情況下是不會出問題了涎永,
WechatIMG5.jpeg
解決方案:
第一種方案:基于現(xiàn)在的設(shè)計思币,使用CDN作為靜態(tài)資源肯定是更好的解決方案。如果要使用非同源的圖片加載羡微,要對圖片設(shè)置
img.crossOrigin="Anonymous"谷饿, 使得圖片能夠支持非同源的圖片加載。
第二種方案:還可以把所有非同源加載的圖片替換成本地圖片進行本地靜態(tài)資源的加載妈倔。這樣也能狗解決問題博投,由于我們的項目比較趕,所以我們采取了比較保守的第二種方案盯蝴。
希望對大家在使用createJS 的時候有所幫助