一、函数封装

//生成微信二维码
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); }

  二、调用

<div id="code"></div>

  

$(document).ready(function(){
var options={};
options.url=codeUrl; //二维码的链接
options.dom="#code";//二维码生成的位置
options.image=$('#img-buffer');//图片id
// options.render="canvas";//设置生成的二维码是canvas格式,也有image、div格式
options.render="image";//设置生成的二维码是canvas格式,也有image、div格式
xyqrcode(options);
});

  

js通过codeURL画二维码的更多相关文章

  1. jquery.qrcode.min.js(支持中文转化二维码)

    详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...

  2. vue 画二维码

    首先安装一下相关的插件 qrcode2 npm install --save qrcode2 然后在需要画二维码的页面引入一下 import QRCode from 'qrcode2' 最后在meth ...

  3. js将网址转为二维码并下载图片

    将一个网址转为二维码, 下面可以添加文字, 还提供下载功能 利用的是 GitHub上面的qrcode.js 和canvas <!DOCTYPE html> <html> < ...

  4. (转)js jquery.qrcode生成二维码 带logo 支持中文

    场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...

  5. js将url转换二维码

    二维码生成库 qrcode.js /*from tccdn minify at 2014-6-4 14:59:43,file:/cn/c/c/qrcode.js*/ /** * @fileovervi ...

  6. qrcode.js的识别解析二维码图片和生成二维码图片

    qrcode只通过前端就能生成二维码和解析二维码图片, 首先要引入文件qrcode.js,下载地址为:http://static.runoob.com/download/qrcodejs-04f46c ...

  7. vue2.0 引用qrcode.js实现获取改变二维码的样式

    vue代码 <template> <div class="qart"> <div id="qrcode" ref="qr ...

  8. 使用js生成条形码以及二维码

    一.用js生成条形码这种业务场景不是很常见的,最近刚好又接到这种需求 Google一下,发现github还真有这方面的轮子,感谢github,省去了我们很多造轮子的过程, 好了言归正传,首先引入jsb ...

  9. js生成和下载二维码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. java连接redis使用jedis带密码

    一.引入jedis的Maven配置文件 <!-- redis连接客户端jedis --> <dependency> <groupId>redis.clients&l ...

  2. Nmap原理02 - 版本探测介绍(上)

    Nmap原理02 - 版本探测介绍(上) 1.介绍 本文将介绍如何通过修改或添加nmap-service-probes文件来实现对nmap中未知服务的探测,首先介绍服务和版本探测的相关信息,然后介绍服 ...

  3. pat1015. Reversible Primes (20)

    1015. Reversible Primes (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A r ...

  4. PHP通过映射类查找类所在文件

    $reflectObj = new ReflectionClass(类名); $file_name = $reflectObj->getFileName(); var_dump($file_na ...

  5. J2EE课程设计:在线书店管理系统

    1.系统实现 使用SpringMVC框架进行开发 使用Maven进行系统构建 使用MySql数据库 项目只实现了查看图书,搜索图书,加入购物车,创建订单,图书管理等基本功能 前台使用Bootstrap ...

  6. C#中TransactionScope的使用方法和原理(摘)

    出自51CTO博客:http://cnn237111.blog.51cto.com/2359144/1271600 在.net 1.1的时代,还没有TransactionScope类,因此很多关于事务 ...

  7. Android-事件处理机制(待补充)

    http://www.cnblogs.com/plokmju/archive/2013/03/13/2955175.html Android有两条事件处理机制 基于监听的事件处理 基于回调的事件处理 ...

  8. 微服务学习笔记一:Spring Cloud简介

    1.Spring Cloud是一个工具集:Spring   Cloud是在Spring    Boot的基础上构建的,用于简化分布式系统构建的工具集:使架构师在创建和发布微服务时极为便捷和有效. Sp ...

  9. lxml模块(应用xpath技术)

    一.lxml介绍 第三方库lxml是第一款表现出高性能特征的python xml库,天生支持Xpath1.0.XSLT1.0.定制元素类,甚至python风格的数据绑定接口.lxml是通过Cpytho ...

  10. HTML行内元素、块状元素和行内块状元素的区分

    HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...