JQuery qrcode插件生成二维码，并转换为image图片可识别

前言

插件是基于jquery的，必须先引入jquery再引入qrcode插件

1.引入jquery 和 jQuery qrcode插件

引入jq

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

引入qrcode

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2.使用方法

将以下代码复制下来到本地直接查看效果
重要地方都进行注释了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>链接生成二维码，并可识别</title><!--分别引入两个js--><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body><!--定义两个容器，class命名的用来存放链接用，id命名的用来展示可识别的二维码--><div class="erweima">www.baidu.com</div><div id="erweimaImg"></div><script>$(function() {$(".erweima").qrcode({   //选择存放链接容器width: 120, //width height如果不写默认是 256 256 height:120,text: $('.erweima').html() //将链接容器的内容赋值给text}); //定义方法function canvasToImage(canvas) {var image = new Image();// 指定格式 PNG 图片后缀可自定义image.src = canvas.toDataURL("image/png");return image;}//找到需要转换的canvasvar mycanvas1 = document.getElementsByTagName('canvas')[0];//进行方法转换var img = canvasToImage(mycanvas1);//将转换后的img标签插入到显示容器中$('#erweimaImg').append(img);})</script>
</body>
</html>

显示转换前和转换后的二维码

实际使用时，class命名用来存放链接的div需要加上display:none，将第一个canvas生成二维码隐藏,留下image标签的

 <div class="erweima" style="display: none">www.baidu.com</div>

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。

JQuery qrcode插件生成二维码，并转换为image图片可识别相关推荐

jquery.qrcode.js生成二维码插件转成图片格式
1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址: https://github.com/jeromeetien ...
qrcode插件生成二维码并下载
很多情况下,我们需要实现点击按钮,下载二维码图片功能, 1.以下是页面代码 <!DOCTYPE html> <html lang="en"> <hea ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
网页获取微信信息——js使用插件生成二维码（1）
js使用插件生成二维码: 一.安装依赖: npm i qrcodejs2 -S 二.放置二维码的容器,需要给一个ref <div class="QRcodeCon">& ...
python qrcode库生成二维码的代码
如下内容内容是关于python qrcode库生成二维码的内容,希望能对各位有所用. import qrcode img = qrcode.make('Some data here')高级用法impo ...
巧用Python的Qrcode库生成二维码大全
二维码介绍 QR 码是二维条码的一种,QR来自英文 "Quick Response" 的缩写,即快速反应的意思,源自发明者希望 QR 码可让其内容快速被解码. QR 码比普通条码 ...
js前端根据链接生成二维码并转成图片下载
js前端根据链接生成二维码并转成图片下载依赖于jquery.jquery.qrcode.min.js 1.html <div class="qrcode"></ ...
php生成二维码并与背景图片合成
1. 下载 phpqrcode PHP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo,查看地址:http://phpqrcode.source ...
Vue生成二维码，自定义插入图片生成logo
Vue生成二维码,自定义插入图片生成logo vue-qr是一个很棒的制作二维码开源库,github地址:https://github.com/Binaryify/vue-qr 1.安装vue-qr ...

JQuery qrcode插件生成二维码，并转换为image图片可识别

JQuery qrcode插件生成二维码，并转换为image图片可识别相关推荐

最新文章

热门文章