qrcode插件生成二维码

最新推荐文章于 2024-06-01 19:41:15 发布

WiFi_Uncle

最新推荐文章于 2024-06-01 19:41:15 发布

阅读量2.2k

点赞数 5

分类专栏：插件demo JavaScript jquery 文章标签：二维码插件 qrcode 带logo

本文链接：https://blog.csdn.net/wx11408115/article/details/69946572

版权

JavaScript 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

插件demo

6 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>生成带logo的二维码</title>
</head>
<body onload="createQrcode()">
<!-- 	<div>
		<input type="url" name="" placeholder="http://www.wifiuncle.com" id="url">
		<button onclick="createQrcode()">点击生成</button>
	</div> -->
    <div id='qrcode' style='margin-left: 45%; margin-top: 10%'></div>
    <script src="../jquery-2.2.4.min.js"></script>
    <script src="./qrcode.js"></script>
    <script src="./utf.js"></script>
    <script type="text/javascript" src="./jquery.qrcode.js" ></script>
    <script type="text/javascript">
        function makeCode(url) {
            $("#qrcode").qrcode({
                render    : "canvas",
                text    : url,
                width : "200",               //二维码的宽度
                height : "200",              //二维码的高度
                background : "#ffffff",       //二维码的后景色
                foreground : "#000000",        //二维码的前景色
                src: './logo.jpg'             //二维码中间的图片
            });
        }
        function createQrcode () {
            var url = 'http://www.wifiuncle.com;';//$('#url').val();
            makeCode(url);
        }
    </script>
</body>
</html>

效果图:
这里写图片描述
插件下载地址:
https://github.com/davidshimjs/qrcodejs
代码打包下载:
链接：https://pan.baidu.com/s/1as6lQa_9fhq1NqL5_ReOPw
提取码：cpui
(今日2021.07.23 下载自己百度网盘的链接，居然会自动跳到csdn下载二维码的地址，
需要自己手动拷贝到地址栏，才能去网盘下载····太恶心了。。。越来越恶心。。。。)
能用就点个赞再走呗~~~~