先根据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. mysql内建命令快速手记 — 让手指跟上思考的速度（一）

    在微信公众号上看到一篇文章说的很好,意思是说,大牛在尝试各种方案的时候可能并没有超神的预测和筛选能力 只是你通常测试一种情况时,大神已经测试了好几种方案了,讲的是"为什么大多数程序员不喜欢写 ...

  2. JSON高亮格式化页面显示

    高亮CSS定义: <style type="text/css"> pre {outline: 1px solid #ccc; padding: 5px; margin: ...

  3. python3-常用模块之os

    os模块,os是和操作系统交互的模块 os.getcwd() :获取当前工作目录,即当前python脚本工作的目录路径,如果是命令行模式下,同样表示当前目录下 os.listdir(路径): 列出指定 ...

  4. 去掉IE提示：在此页上的ActiveX控件和本页上的其他部分的交互可能不安全。你想允许这种交互吗？

    由于项目需求,需要用到OCX控件.而在IE浏览器中加载OCX控件会有如下提示: 这是因为OCX控件有一个ID,而这个ID注册后IE不认为该OCX控件是安全的.所以,必须把这个控件注册为安全控件. 假设 ...

  5. Windows API 第二篇 SHGetSpecialFolderPath

    BOOL SHGetSpecialFolderPath( HWND hwndOwner,                                  LPTSTR lpszPath,       ...

  6. 关于ubuntu中ifconfig得到的ip地址为127.0.0.1

    我们的解决办法是 重新添加一个网络适配

  7. [转]【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox

    反反复复考虑后,准备把这一章的切入点瞄准ListBox.并用了一个看起来有点别扭的标题“认识ListBox",许多人看到这里就不爱看了,即使是大学里用winform的学生也会说ListBox ...

  8. Android SDK上手指南：下一步学习方向

    Android SDK上手指南:下一步学习方向 2014-02-28 11:01 核子可乐 译 51CTO 字号:T | T 到目前为止,我们已经介绍过的知识足以帮助大家从非常理想的起点开始进行And ...

  9. JS控制视频的播放

    在用js定时器控制视频时, html部分: <video id="video_1"> <source id="source_1" src=&q ...

  10. C/C++ - 类中成员变量是引用

    C++引用 引用在定义时必须初始化,否则编译时便会报错.如果类(自定义类型)的成员是引用类型,需要注意一些问题. 引用成员变量 并不为这个变量新辟空间:类对象做成员变量则是要对其新辟一段空间的 不能有 ...