先根据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. Lucene 全文搜索解析

    一.创建查询对象的方式 对要搜索的信息创建 Query 查询对象,Lucene 会根据 Query 查询对象生成最终的查询语法.类似关系数据库 Sql 语法一样,Lucene 也有自己的查询语法,比如 ...

  2. v-bind:class

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  3. Python基础---序列对象

    一.序列简介 数据结构是通过某种方式组织在一起的元素的集合. 容器(Container)是一种Python的数据结构,基本上是包含其他对象的任意对象.序列和映射(如字典)是两类主要的容器.集合(Set ...

  4. Java超简明入门学习笔记（零）

    Java编程思想第4版学习笔记(零) 前言          这个笔记本主要记录了我在学习Java编程思想(第4版,中文版)的过程中遇到的重难点及其分析.主要参考了C++11版本的C++语言,对比了它 ...

  5. SPRINGBOOT配置MYSQL,MYBATIS,DRUID

    配置 DRUID连接池 MYSQL数据库 MYBATIS持久层框架 添加依赖 <dependency> <groupId>mysql</groupId> <a ...

  6. NoSQL与关系数据库的比较

  7. 如何做系列(2)- XML转义字符

    < < 小于号 > > 大于号 & & 和 &apos; ' 单引号 " " 双引号 也可以使用<![CDATA[ ]]> ...

  8. 牛客NOIP暑期七天营-TG3 赛后题解

    目录 牛客NOIP暑期七天营-提高组3 A-破碎的矩阵 题目描述 link 题解 代码 B-点与面 题目描述 link 题解 代码 C-信息传递 题目描述 link 题解 牛客NOIP暑期七天营-提高 ...

  9. 如何解决mysql服务器load高

    .登录主机 # ssh hostname .确定是否是mysql导致 # top .查看是哪些sql正在慢查询 # mysql -h hostname -P port -u username # sh ...

  10. 大牛就别进来了.npm --save-dev --save 的区别

    --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西. 比如,你写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是devDependencies.如果 ...