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水平有限。
分享手機都自帶如（圖二），其實是按鈕應該叫點我截圖。
到此結束！