HTML5 使用 JS 生成二维码,带头像

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

首先我们需要一个插件 jquery.qrcode.js,该插件基于 jquery 插件,使用方法很简单,如下

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>

效果如下,这样,我们就可以自己生成 二维码了,可以用手机扫一扫,发现能完美获得 配置的内容

HTML5 使用 JS 生成二维码,带头像_第1张图片

可是我们发现,某些官方网站的二维码中间是有 logo 的,那么这个可以加 logo 吗?

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

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>

效果如下,图片选的不是很好,效果不好看,不过总算是实现了

HTML5 使用 JS 生成二维码,带头像_第2张图片

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

大家可以直接引用改地址,也可以下载后在本地引入

 

转载于:https://www.cnblogs.com/lovling/p/10518556.html

你可能感兴趣的:(HTML5 使用 JS 生成二维码,带头像)