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.使用方法

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


<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>
    
    <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>
	
    <div class="erweima">www.baidu.comdiv>
    <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;
            }

            //找到需要转换的canvas
            var mycanvas1 = document.getElementsByTagName('canvas')[0];

            //进行方法转换
            var img = canvasToImage(mycanvas1);

            //将转换后的img标签插入到显示容器中
            $('#erweimaImg').append(img);
        })
    script>
body>
html>

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

JQuery qrcode插件生成二维码,并转换为image图片可识别_第1张图片

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

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

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

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

你可能感兴趣的:(JQuery,javaScript)