html + js 生成二維碼還要嵌入現有圖片中,並截圖分享到微信。
阿新 • • 發佈:2018-12-21
用到的js 庫 jquery-3.3.1.min.js jquery.qrcode.min.js html2canvas.js
上html原始碼(如下):只需新建一個html ,你就可以看如(圖一)的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <meta charset="UTF-8"> <title>二維碼</title> </head> <style> </style> <body> <td style="position:relative;" id="td"> <div> <img style="position:absolute; z-index:1; height: 100%;width: 100%" src="/img/card.png" /> </div> <div style="position:absolute;top:60%; left:35%; z-index:2" class="code" id="code"></div> <input style="position:absolute; top:10%; left:40%; z-index:2" type="button" id="dd" value="點我分享我的二維碼"> </td> <div id="box"></div> </body> <script src="/js/jquery-3.3.1.min.js"></script> <script src="/js/jquery.qrcode.min.js"></script> <script src="/js/html2canvas.js"></script> <script> /* * 任意字串 生成二維碼 預設使用Canvas畫圖 * */ $('#code').qrcode({ render: 'canvas', width: 130, height: 130, text: 'http://blog.csdn.net/u011127019' }); // $('#code').qrcode('http://blog.csdn.net/u011127019'); /** * 觸發截圖 */ $("#dd").on("click", function (event) { $("img").hide(""); $("#code").hide(""); $("#dd").hide(""); event.preventDefault(); html2canvas(document.body).then(function (canvas) { var dataUrl = canvas.toDataURL(); var newImg = document.createElement("img"); newImg.src = dataUrl; $("#box").html(newImg); }); }); </script> </html>
(圖一)
(圖二)
業務場景:要前段用jquery生成二維碼,二維碼要業務推廣用,要附在圖片上。而且還要手機瀏覽器瀏覽,
專案是手機的web頁面,當app用,從沒見過如此變態的要求。
思路是 首先生成二維碼,然後兩張圖合併,截圖,剩下的手機瀏覽器都自帶分享功能,分享到你。
1.本人生成二維碼參考( https://blog.csdn.net/u011127019/article/details/51226104 )
2. 截圖, 我忘了。
還有本來我是想把圖片當背景的,無奈截圖不成功,後來就兩張圖片重疊放置,也可以。
注意:你們瀏覽器顯示不好看的話,自己調調樣式,反正我手機上很好看,css水平有限。
分享手機都自帶如(圖二),其實是按鈕應該叫點我截圖。
到此結束!