H5活动刮刮卡功能的实现与注意事项

      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/复制代码

转载于:https://juejin.im/post/5b33560151882574d971330d