html + js 生成二维码还要嵌入现有图片中，并截图分享到微信。

用到的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水平有限。

分享手机都自带如（图二），其实是按钮应该叫点我截图。

到此结束！

html + js 生成二维码还要嵌入现有图片中，并截图分享到微信。

猜你喜欢