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>