生成二维码

利用JavaScript生成二维码并且中间有logo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>该二维码支持中文和LOGO</title>
 
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="utf.js"></script>
<script type="text/javascript" src="jquery.qrcode.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#qrcodeCanvas").qrcode({
            render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
            text : "<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">http://www.baidu.com</span>",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
            width : "200",               //二维码的宽度
            height : "200",              //二维码的高度
            background : "#ffffff",       //二维码的后景色
            foreground : "#000000",        //二维码的前景色
            src: 'photo.jpg'             //二维码中间的图片
        });
    });
</script>
 
</head>
<body>
    <center>
      <h2>该二维码支持中文和LOGO</h2>
      <div id="qrcodeCanvas"></div>
    </center>
</body>
</html>

最后我采用的这个啦，很好用哦～
qr-image 在 Egg.js 中的使用

安装

  npm i qr-image --save

使用
前端：

<img src="/qrcode?text=hello Egg.js" alt="二维码"/>

后端：

'use strict';

const qr = require('qr-image');


class CelebrationController extends Controller {

  async qrcode() {
    // const { id } = this.ctx.query;
    const id = 1;
    try {
      // 大小默认5，二维码周围间距默认1
      const img = qr.image(`https://h5celebration.woody.club?id=${id}`, { type: 'png', size: 4, margin: 1 });
      this.ctx.status = 200;
      this.ctx.type = 'image/png';
      this.ctx.body = img;
    } catch (e) {
      this.ctx.status = 414;
      this.ctx.set('Content-Type', 'text/html');
      this.ctx.body = '<h1>414 Request-URI Too Large</h1>';
    }
  }
}
module.exports = CelebrationController;

生成二维码

推荐阅读更多精彩内容