jquery.qrcode.js 本地生成二维码，带 logo

时间 2020-06-07

标签 jquery.qrcode.js jquery qrcode 本地生成二维 logo 栏目 JQuery 繁體版

原文原文链接

通常在项目开发中，前端显示给用户扫描的二维码基本都是由后端代码生成的，那么这个高大上的功能能不能用 JS 来绘制呢？答案是确定的javascript

首先咱们须要一个插件 jquery.qrcode.js，该插件基于 jquery 插件，使用方法很简单，以下css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>二维码</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js"></script>
</head>
<style type="text/css"> #output { width: 360px; padding: 0;
    }
</style>
<body> 
    <div id="output"></div>
</body>
<script type="text/javascript"> $('#output').qrcode({ text: "ninhaonihaohnihao", // 二维码的内容
 render: "canvas", // 设置渲染方式
 width: 360, // 设置宽度: 默认256
 height: 360, // 设置高度: 默认256
 background: "#ffffff", // 背景颜色
 foreground: "#000000", // 前景颜色
 }); </script>
</html>

效果以下，这样，咱们就能够本身生成二维码了，能够用手机扫一扫，发现能完美得到配置的内容html

但是咱们发现，某些官方网站的二维码中间是有 logo 的，那么这个能够加 logo 吗？前端

目前该插件不支持该功能，但是笔者是有强迫症的人，这个黑乎乎的二维码怎么能知足我呢，百度 google 一番，经过修改了插件的一些源码，终于实现了想象中的效果java

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>二维码</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js"></script>
</head>
<style type="text/css"> #output { width: 360px; padding: 0; margin: 100px auto 0 auto;
    }
</style>
<body> 
    <div id="output"></div>
</body>
<script type="text/javascript"> $('#output').qrcode({ text: "ninhaonihaohnihao", // 二维码的内容
 render: "canvas", // 设置渲染方式
 width: 360, // 设置宽度: 默认256
 height: 360, // 设置高度: 默认256
 background: "#ffffff", // 背景颜色
 foreground: "#000000", // 前景颜色
 src: "./my.jpg", // logo地址, 图片居中, 图片为二维码的 1/9 为最佳，可适当调整，可是太大会影响二维码的内容
 imgWidth: 120, // logo宽度
 imgHeight: 120                  // logo高度
 }); </script>
</html>

效果以下，图片选的不是很好，效果很差看，不过总算是实现了jquery

修改后的插件已上传到博客园，有兴趣的朋友能够下载看看，顺便看看能不能再优化 https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.jscanvas

你们能够直接引用改地址，也能够下载后在本地引入后端