画布跨域像素错误(canvas cross domain pix
2018-08-24 本文已影响0人
前端小菜花
我们项目组基于createJS做了一个有意思的红包雨活动（createJS，canvas），项目快结束的时候，我们开始了生产环境的部署，我们把所有的静态资源都放到了七牛CDN上，本以为能够使我们的canvas加载图片得更快，结果意外发生了，在生产环境上，报了这个错
屏幕快照 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
加载图片的时候，原来开发的时候使用的是本地图片，easeJS load 图片的时候 在同源域名的情况下是不会出问题了，
WechatIMG5.jpeg
解决方案：
第一种方案：基于现在的设计，使用CDN作为静态资源肯定是更好的解决方案。如果要使用非同源的图片加载，要对图片设置
img.crossOrigin="Anonymous"， 使得图片能够支持非同源的图片加载。
第二种方案：还可以把所有非同源加载的图片替换成本地图片进行本地静态资源的加载。这样也能狗解决问题，由于我们的项目比较赶，所以我们采取了比较保守的第二种方案。
希望对大家在使用createJS 的时候有所帮助
