jQuery-qrcode.js 生成带Logo 的二维码
引入文件 jQuery-qrcode.js
地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js
https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.min.js
1、在页面上写img 标签 src 为 Logo 路径, 如不需要显示 则隐藏。。如 :
<img src="~/images/Logo.png" class="hidden" id="myLogo" />
2、页面上 写个 div 放 二维码:
<div id="QRCode"></div>
3、创建 带Logo 的二维码 js d代码:
//生成二维码
function createCode(QrUrl) {
$("#QRCode").qrcode({
render: "canvas", //也可以替换为table
minVersion: 1, // version range somewhere in 1 .. 40
maxVersion: 40,
ecLevel: 'H', //识别度 'L', 'M', 'Q' or 'H'
left: 0,
top: 0,
size: 100, //尺寸
fill: '#000', //二维码颜色
background: null, //背景色
text: QrUrl, //二维码内容
radius: 0.1, // 0.0 .. 0.5
quiet: 2, //边距
mode: 4,
mSize: 0.2, //图片大小
mPosX: 0.5,
mPosY: 0.5,
label: 'jQuery.qrcode',
fontname: 'sans',
fontcolor: '#000',
image: $('#myLogo')[0]
});
},
jQuery-qrcode.js 生成带Logo 的二维码的更多相关文章
- js生成带logo的二维码
作为一名java程序员,一直以来都是使用服务端生成二维码,最近接触前端的设计,感觉二维码这块如果放到前端去生成,一方面可以减轻服务端的压力,访问带宽,另一方面,前端页面控制比较顺畅 闲话少叙,说下我的 ...
- js生成带log的二维码(qrcodejs)
github: qrcodejs cdn: http://static.runoob.com/assets/qrcode/qrcode.min.js #qrcode #qrcode margin: 2 ...
- C#生成带logo的二维码
带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码. 生成的二维码效果如下: 下面直接贴出二维码生成类 QRCode ...
- .NET生成带Logo的二维码
使用ThoughtWorks.QRCode生成,利用这个库来生成带Logo的二维码(就是中间嵌了一个图片的二维码),直接见代码: HttpContext context = HttpContext.C ...
- 涛哥的Python脚本工具箱之生成带Logo的二维码
近期须要在二维码上加Logo,网上没有找到好用的,于是自己用python写了一个. 须要安装qrcode,PIL库 二维码简称 QR Code(Quick Response Code),学名为高速响应 ...
- phpqrcode生成带logo的二维码图片及带文字的二维码图片
<?php require_once "./phpqrcode/phpqrcode.php"; /** * 这样就可以生成二维码了,实际上在png这个方法里还有几个参数需要使 ...
- PHP生成带logo图像二维码的两种方法
本文主要和大家分享PHP生成带logo图像二维码的两种方法,主要以文字和代码的形式和大家分享,希望能帮助到大家. 一.利用Google API生成二维码Google提供了较为完善的二维码生成接口,调用 ...
- C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码(二)
1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...
- js生成带参的二维码
最近项目中有需求生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实 引入js: require.config({ baseUrl : ...
随机推荐
- 在 CentOS 上安装 node.js
进入到 /usr/local/ 目录中: cd /usr/local/ 创建 nodejs 文件夹: mkdir -p nodejs 进入到 nodejs 目录中: cd nodejs 下载 node ...
- 软件项目技术点(2)——Canvas之坐标系转换
AxeSlide软件项目梳理 canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为 ...
- 使用angular帮你实现拖拽
拖拽有多种写法,在这里就看一看angular版的拖拽. <!DOCTYPE html> <html ng-app="myApp"> <head> ...
- matlab 中“newff” 函数的参数设置
matlab 中"newff" 函数的使用方法技巧|和各参数的意义 先来一个简单的源程序让大家练习一下: % Here input P and targets T define a ...
- 详解Javaweb中常见漏洞的防御
上一篇给大家介绍了SpringMVC中常见的客户端数据输入点,这一篇给大家讲解下java中常见漏洞的防御方法. 0x01.sql注入 下面我们就用利用SpringMVC自带的数据库操作类jdbcTem ...
- (四)WebDriver常用方法
点击和输入 前面我们已经学习了定位元素, 定位只是第一步, 定位之后需要对这个元素进行操作, 或单击(按钮) 或输入(输入框) , 下面就来认识 WebDriver 中最常用的几个方法: clear( ...
- vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- 为我们的SSR程序添加热更新功能
前沿 通过上一篇文章 通过vue-cli3构建一个SSR应用程序 我们知道了什么是SSR,以及如何通过vue-cli3构建一个SSR应用程序.但是最后遗留了一些问题没有处理,就是没有添加开发时的热更新 ...
- June 14th 2017 Week 24th Wednesday
Love looks not with the eyes, but with the mind. 爱,不在眼里,而在心中. Staring in her eyes and you will find ...
- Python3基本数据类型(三、列表)
序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字-它的位置,或索引,第一个索引是0,第二个索引是1,以此类推.Python有6个序列的内置类型,但最常见的是列表和元组.序列都可以进 ...