js生成二维码，并在二维码中添加小图片

最新推荐文章于 2024-09-14 16:29:27 发布

原创最新推荐文章于 2024-09-14 16:29:27 发布 · 置顶 · 5.1k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

博客记录了如何使用JavaScript生成包含小图片的二维码。首先引入jQuery和qrcode插件，然后在页面指定位置生成二维码，并将qrCodeIco作为中间的图片。经过设置，可以成功实现二维码中间显示小图片的功能。

最近有个需求，要求每个网页对应一个二维码，搞了几天终于有点眉目了。

留个笔记：

1、首先在页面中加入jquery库文件和qrcode插件

<script src="../../../../static2018/js/qrcode.js" type="text/javascript" ></script>
<script src="../../../../static2018/js/qrcode_jq.js" type="text/javascript" ></script>

下载地址：https://github.com/jeromeetienne/jquery-qrcode这个都是源码，很容易找到。

我是把jquery.qrcode.js名字改了一下改成 qrcode_jq.js。

2、在页面中需要显示二维码的地方加入以下代码：

<div class="ad_img" id="erweima">
   <img id="qrCodeIco" style="display: none;" src="/img/common/dasang.png" alt="">
</div>

说明： qrCodeIco是放在二维码中间的小图片，style设置为display: none不然会出问题。

3、调用qrcode插件

$('#erweima').qrcode("http://www.baidu.com");
$("#erweima canvas")[0].getContext('2d').drawImage($("#qrCodeIco")[0], 100, 100, 65, 65);
// 100, 100, 65, 65分别是X位置(一般取二维码宽*0.4)，Y位置(一般取二维码高*0.4)，小图片宽度，小图片高度

4、最终效果图