7月清仓活动有个刮刮卡的功能。找到了个很好用的插件，但是有个坑搞了我好久。就是当覆盖层是个图片的时候老显示跨域的问题。

先附上页面线上地址。

https://m.shandjj.com/index.php/Forever/flashcard

看到的结果是这样的：

也可以出发回调函数：

一切正常。注意文档页面中的图片要转为base64编码的格式：

接下来说一下我项目中遇到的问题：附上GitHub组件地址。自认为是不错的刮刮卡组件。

https://github.com/Franslee/lucky-card复制代码

//基本用法LuckyCard.case({coverColor:'#CCCCCC',ratio:.6,callback:function(){alert('中奖啦！')}});//刮开层支持使用图片，但图片不能跨域，如果跨域可以考虑将先其转成Data URI，再设置LuckyCard.case({coverImg:'./demo.jpg'});//callback可作为一个独立的参数存在LuckyCard.case(function(){	//清除掉刮开层的所有像素	this.clearCover();});复制代码

注意点是如果跨域先将其转为data URL，在设置。也就是转为base64的编码格式。

千万不要写为./demo.jpg

这样写的话会报错：错误图片如下：

出发回调也会失败。

下面附上base64编码转换地址：

http://www.bejson.com/ui/image2base64/复制代码