先根据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. 什么是 MIME TYPE

    首先,我们要了解浏览器是如何处理内容的.在浏览器中显示的内容有 HTML.有 XML.有 GIF.还有 Flash ……那么,浏览器是如何区分它们,决定什么内容用什么形式来显示呢?答案是 MIME T ...

  2. Python学习day05 - Python基础(3) 格式化输出和基本运算符

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  3. vue 关闭微信浏览器（返回路由为undefined时）

    参考:https://blog.csdn.net/KingJin_CSDN_/article/details/77050569 main.js: import router from './route ...

  4. C语言内存布局简记待补充

    C语言存储类型总结内存操作函数总结 用于自己学习和记录 1. void *memset(void *s, int c, size_t n); #include <string.h> 功能: ...

  5. [转][Prism]Composite Application Guidance for WPF(6)——服务

      [Prism]Composite Application Guidance for WPF(6)——服务                             周银辉 在Ioc和DI中,最熟悉的 ...

  6. Gym 100712H

    Gym 100712Hhttps://vjudge.net/problem/195715/origin先缩点,再建立新图,然后跑两遍dfs求树上最长路 #include<iostream> ...

  7. Python开发之MySQL安装

    MySQL下载安装后再安装破解版本的Navicat图形化数据库工具即可.   安装python后.再进行如下操作(也可以安装好虚拟环境virtualenv 或者增强工具pip install virt ...

  8. C语言处理字符串及内存操作

    字符串处理函数 1.字符串长度 strlen表示包含的字符的个数,size_t strlen(char cosnt *string), 返回的是size_t类型,它是无符号整数类型,在表达式中进行运算 ...

  9. Tool-MySQL-SQLyog：SQLyog

    ylbtech-Tool-MySQL-SQLyog:SQLyog SQLyog 是一个快速而简洁的图形化管理MYSQL数据库的工具,它能够在任何地点有效地管理你的数据库,由业界著名的Webyog公司出 ...

  10. 【DM8168学习笔记4】ezsdk安装过程记录

    安装文件 ezsdk_dm816x-evm_5_05_02_00_setuplinux DM8168-EZSDK文件结构如图所示.               (图片来自:http://process ...