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活动刮刮卡功能的实现与注意事项相关推荐

H5定位考勤打卡功能实现
这次搞这个定位打卡的功能搞的相对时间有点长,中间出现过很多问题,想把自己遇到的各种问题记录下来,涨涨经验. > 在实现的过程中首先我用的是百度地图,通过hBuilder打包之后定位就不准确了,集 ...
java实现定位打卡功能
说明:用于打卡签到功能: 用户到达某一地点后,根据用户所在位置经纬度位置和目的地所在位置经纬度进行计算对比,对比值大于设置距离差,不能打卡,小于设置距离差,可以打开. 1.pom.xml <!- ...
android仿淘宝刮刮卡功能实现
去年淘宝和天猫的活动搞的有声有色的,其中有一个游戏还是很受大家欢迎的,那就是红包刮刮卡,自己也挺迷的,一刮起来就停不下来,有没有? 最近自己也在学习android入门,正好前些日子在搜索一个功能示例的 ...
用c#开发微信 (16) 微活动 2 刮刮卡
微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...
用Canvas实现刮刮卡功能的研究与实践
前几天,单位老刘让我研究一下网上最近很流行的"刮刮卡"是怎么实现的,我第一时间就想起了我媳妇曾经跟我说过的:"在HTML5中Canvas的绘图能力很强大" ...
【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦. 一.前言 ...
HTML5实现类似刮刮卡的功能
HTML5实现类似刮刮卡的功能有这样一个功能,当我们使用微信公众号,发送图片时......此处省略300字! 注意要点设置: 1.设置用户缩放:user-scalable=no|yes <me ...
前端遮罩层实现_cocos creator--游戏开奖功能组件《刮刮卡》特效实现
一. 需求分析 [1]实现手指触摸刮开效果:[2]优化:判断刮开与否(能否正常看到奖项). 二. 游戏场景可视化编辑三. 手指触摸刮刮卡动态刮开效果的实现 Mask为反向遮罩节点,必须确保大小和位置 ...
刮刮卡功能的具体实现
今天整理之前的代码,忽然看到之前自己写的一个刮刮卡,整理下以便以后使用,同时分享给需要的朋友,如有错误,还请多多指正. 实现的步骤,其实就是徒手画三个图层叠加在一起,最上层是绘制需要的问题,就是以上所 ...

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

H5活动刮刮卡功能的实现与注意事项相关推荐

最新文章

热门文章