? ? ? 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活动刮刮卡功能的实现与注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。