先根据qrcode官网demo，不同属性值的变化，二维码的变化效果：https://larsjung.de/jquery-qrcode/latest/demo/

进入demo中，审查元素查看里面引用的js文件，你会发现jquery-qrcode-0.14.0.js，这个版本支持二维码中插入图片。

下面是我写的一个列子：

引用js:

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-0.14.0.js"></script>

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>生成二维码</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-0.14.0.js"></script>
    <script type="text/javascript" src=" xyqrcode.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    var options={};
    options.url="http://www.baidu.com"; //二维码的链接
    options.dom="#code";//二维码生成的位置
    options.image=$('#img-buffer')[0];//图片id
    options.render="canvas";//设置生成的二维码是canvas格式，也有image、div格式
    xyqrcode(options);
});
</script>
</head>

<body>
<div id="code"></div>
<img id="img-buffer" src="gy.jpg">
</body>
</html>

xyqrcode.js（给qrcode传生成的二维码属性）

function xyqrcode(options) {
    var settings = {
        dom:'',
        render: 'canvas',   //生成二维码的格式还有image、div
        ecLevel:"H",
        text:"",
        background:"#ffffff",
        fill:"#333333", //二维码纹路的颜色
        fontcolor:"#ff9818",
        fontname:"Ubuntu",
        image:{},
        label:"",
        mPosX:0.5,   //图片在X轴的位置
        mPosY:0.5,    //图片在X轴的位置
        mSize:0.27,   //图片大小
        minVersion:10,
        mode:4,
        quiet:1,
        radius:1,
        size:400  
    };
        if (options) {
            $.extend(settings, options);//options对象跟settings比较，相同的就替换，没有的就添加

}
        if(settings.dom.length==0){
            window.console.log("Error: dom empty!");
            return;
        }
        if(settings.url.length==0){
            window.console.log("Error: url empty!");
            return;
        }
    settings.text=settings.url; //在qrcode生成二维码的地址是text。这里就把url赋值给text
        $(settings.dom).qrcode(settings);
     
}

希望对你有帮助^_^ !

js生成二维码以及插入图片的更多相关文章

  1. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  2. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

  3. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  4. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  5. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  6. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  7. php--------使用js生成二维码

    php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...

  8. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  9. java和js生成二维码

    1. java生成二维码 1.1 依赖jar包配置(使用maven依赖) <dependency> <groupId>com.google.zxing</groupId& ...

随机推荐

  1. Netty SimpleChannelInboundHandler和ChannelInboundHandler区别

    一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 在客 ...

  2. <每日一题>题目28：生成随机的测验试卷(单选题)

    #项目:生成随机的测验试卷文件 import random #资料库 capitals = {'北京市':'京','上海市':'沪','天津市':'津','重庆市':'渝','河北省':'冀','山西 ...

  3. https://blog.csdn.net/qq_33169863/article/details/82977791

    https://blog.csdn.net/qq_33169863/article/details/82977791 ** 查看设备连接  adb devices ** 列出手机已安装的包名 adb ...

  4. 从0开始学习ssh之日志工具与配置log4j

    添加slf4j-api-1.6.1,slf4j-log4j12-1.6.1,log4j-1.2.15三个jar包到lib文件夹下就可以使用log4j日志文件.具体配置在log4j.properties ...

  5. 网络爬虫技术Jsoup

    Jsoup介绍:Jsoup 是一个 Java 的开源HTML解析器,可直接解析某个URL地址.HTML文本内容 Jsoup主要有以下功能: 1. 从一个URL,文件或字符串中解析HTML 2. 使用D ...

  6. 2019-8-30-C#-如何在项目引用x86-x64的非托管代码

    title author date CreateTime categories C# 如何在项目引用x86 x64的非托管代码 lindexi 2019-08-30 08:53:52 +0800 20 ...

  7. Umount- Linux必学的60个命令

    1.作用 umount命令的作用是卸载一个文件系统,它的使用权限是超级用户或/etc/fstab中允许的使用者. 2.格式 unmount -a [-fFnrsvw] [-t vfstype] [-n ...

  8. [HEOI2016/TJOI2016]排序 线段树+二分

    [HEOI2016/TJOI2016]排序 内存限制:256 MiB 时间限制:6000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而 ...

  9. Python3.5 安装 & hello world

    1.下载安装python https://www.python.org/downloads/release/python-364/ 2.安装成功运行 python shell 3.或者cmd => ...

  10. xcode下的DerivedData

    在模拟器运行的情况下经常会出现以下的错误: error: remove /Users/mac/Library/Developer/Xcode/DerivedData/YuQing-amkrrucjrn ...