在日常生活中,随处可见二维码,那么js如何生成动态的专属二维码?其实,通过“二维码插件”我们可以快速生成二维码。在这,记录一下的生成专属二维码demo,一起来看看jquery.qrcode.js是怎么使用的。

相关插件

<!--布局需要一个放canvas画布的容器-->
<div class="myQRcode"></div>
<!--引用相关js:-->
<script src="jquery.min.js"></script>
<script src="utf.js"></script><!--qrcode.js引用utf.js,避免乱码-->
<script src="jquery.qrcode.js"></script>

js的使用

var codeUrl = "https://home.cnblogs.com/u/missme-lina"
$(".myQRcode").qrcode({
render : "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
text : codeUrl, //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
width : "215", //二维码的宽度
height : "215", //二维码的高度
background : "#ffffff", //二维码的后景色
foreground : "#000000", //二维码的前景色
src: 'https://pic.cnblogs.com/avatar/1211848/20190103102237.png' //二维码的logo图
});

实现效果

jquery.qrcode.js的API

请转载官方文档:https://larsjung.de/jquery-qrcode/

demo:动态生成专属二维码的更多相关文章

  1. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  2. C# 实现生成带二维码的专属微信公众号推广海报

    原文:C# 实现生成带二维码的专属微信公众号推广海报 很多微信公众号中需要生成推广海报的功能,粉丝获得专属海报后可以分享到朋友圈或发给朋友,为公众号代言邀请好友即可获取奖励的.海报自带渠道二维码,粉丝 ...

  3. python3使用myqr生成链接二维码

    技术背景 二维码技术在各个领域中都已经有非常成熟的应用,比如随处可见的二维码支付,比如疫情期间的绿码,再比如工业领域中,可以使用二维码作为定位的标签,大大提升了室内定位技术的精确度.二维码的格式内容大 ...

  4. pbfunc外部函数扩展应用-直接在Datawindow中生成QR二维码,非图片方式

    利用pbfunc外部函数在Datawindow中直接生成QR二维码,非图片方式.需要注意以下面几点: Datawindow的DataObject的单位必须为像素(Pixels). Datawindow ...

  5. 通过生成支付二维码来实现微信支付的解决方案 - EasyWechat版(转)

    上一篇我们讲了在微信浏览器内实现微信支付的功能,它特别适合于一些基于微信公众号的h5站点等,支付流程也相当流畅,但是... 还有一种情况,比如现在北哥兄弟连PC版,是生成了一个二维码,这个二维码是专属 ...

  6. Android应用--QR的生成(二维码)

    二维码的定义: 二维码(2-dimensional bar code),是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的. 在许多种类的二维条码中,常用的码制 ...

  7. Unity生成简易二维码

    最近项目需求,需要在Unity中动态生成二维码.所以就研究了一下,下面把动态生成二维码的方法向大家分享一下. 第一种方法 需要一个 ZXing.dll文件. 下载地址我会在文章结尾给出. 直接将下载好 ...

  8. Java生成艺术二维码也可以很简单

    原文点击: Quick-Media Java生成艺术二维码也可以很简单 现在二维码可以说非常常见了,当然我们见得多的一般是白底黑块,有的再中间加一个 logo,或者将二维码嵌在一张特定的背景中(比如微 ...

  9. vue 把后端返回的图片和url链接生成的二维码用canvas 合成一张图片

    H5 页面在做某个活动的时候,有两种分享方式,一种是链接分享,一种是图片分享. 链接分享的话,如果是在微信里,就可引导用户利用微信浏览器自带的分享,根据sdk设置分享标题简介链接缩略图即可. 图片分享 ...

随机推荐

  1. XCode 无法识别设备

    XCode 取消Unpair Device 后不能读取设备 1:退出XCode 2:断开设备连接 3:在终端执行‘sudo pkill usbmuxd’ 4:重启XCode 5:连接设备即可

  2. Eclipse 刚检出的项目 Build path 的时候提示 No action available

    问题: 从SVN检出来的项目发现无法进行build path,也不报错,任何类之间也无法关联(Ctrl+右键无法点进去). 原因: .classpath是Eclipse的工程文件,别人没有将工程的信息 ...

  3. LabVIEW(十二):VI本地化-控件标题内容的修改

    一.对于一般LabVIEW的学习,很少遇到本地化的问题但是我们经常会遇到界面控件标题的显示问题.由于各个技术领域的专业性,往往用户对VI界面的显示有自己的要求,其中就包括控件的标题问题,这可以理解成本 ...

  4. 使用cygwin中的awk工具进行mysql binlog日志查看[利刃篇]

    linux工具确实强悍,然而作为没有linux机器使用权以及开发没有使用linux进行的人,有时想用一些命令确实不方便,所以,才去试着用用cygwin,一款在windows平台上运行的类UNIX模拟环 ...

  5. kubernetes集群搭建(4):node节点安装

    下列所有操作需要在所有node节点上操作,并注意红色部分的修改 1.node节点不需要安装etcd来存储相关信息 yum -y install flannel kubernetes 2.修改flann ...

  6. 读取.Properties文件以及Spring注解读取文件内容

    public class Main { public static void main(String[] args) throws IOException { //创建Properties对象 Pro ...

  7. javascript History对象属性和方法

    History对象 History对象包含用户(在浏览器窗口中)访问过的URL length: 返回浏览器历史列表中的URL数量(打开浏览器,访问淘宝,返回1,再访问百度,返回2) History对象 ...

  8. .NET手记-JS获取Url参数

    最近为App做活动专区,其中很多活动都是采用html 5页面来制作的.一方面体量较小,制作快速,更新维护容易:另一方面,嵌入App后适配效果也不会很差. 这里我们采用混编形式来从native app传 ...

  9. Liferay7 BPM门户开发之7: Activiti中的重要概念和主要数据库结构

    流程的人员参与角色: Assignee :签收者(即待办人) Candidate:候选人 Owner:拥有者 Starter:启动者 participant:参与者,包含查阅 流程变量的类型: Str ...

  10. 2-4 完整Todolist案例

    在2-3 的基础上继续,综合前面的Todolist编写一个完整的案例,实现基本的输入内容,添加内容,点击删除内容 稍微讲解54行代码 splice()的用法