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

总结

以上是生活随笔为你收集整理的H5活动刮刮卡功能的实现与注意事项的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。