业务场景：要前段用jquery生成二维码，二维码要业务推广用，要附在图片上。而且还要手机浏览器浏览，

项目是手机的web页面，当app用，从没见过如此变态的要求。

思路是 首先生成二维码，然后两张图合并，截图，剩下的手机浏览器都自带分享功能，分享到你。

1.本人生成二维码参考（ https://blog.csdn.net/u011127019/article/details/51226104 ）

2. 截图， 我忘了， 太简单了。

用到的js 库

jquery-3.3.1.min.js
jquery.qrcode.min.js
html2canvas.js

 

上html源码（如下）：只需新建一个html加如上的三个js，复制如下代码，你就可以看如（图一）的效果。分享手机都自带如（图二），其实是按钮应该叫点我截图。

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  name=\"viewport\" content=\"maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0\"/>
    <  name=\"format-detection\" content=\"telephone=no,email=no,date=no,address=no\">
    <  charset=\"UTF-8\">
    < >二维码</ >
</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>
<  src=\"/js/jquery-3.3.1.min.js\"></ >
<  src=\"/js/jquery.qrcode.min.js\"></ >
<   src=\"/js/html2canvas.js\"></ >
< >
    /*
    * 任意字符串 生成二维码  默认使用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);
        });
    });

</ >


</html>

（图一）

\"\"

（图二）

\"\"

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章