koa 二維碼的實現 · koa實戰

qcode.html ``` ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>qrdemmo</title> <script src="https://cdn.bootcdn.net/ajax/libs/qrious/4.0.2/qrious.min.js"></script> </head> <body> <h1>使用的是qrious</h1> <div style="align-content: center"> <canvas id="qr"></canvas> </div> <script> (function() { const qr = new QRious({ element: document.getElementById('qr'), value: 'https://www.baidu.com/', }) })(); </script> <div> <h2>后臺獲取二維碼</h2> <h2>使用的是qr-image</h2> <div>  <img src="/qucode?text=s?tn=baidutop10&rsv_idx=2&wd=武漢天氣預報" /> </div> </div> </body> </html> ~~~ ``` app.js ``` ~~~ /** * 1.安裝 * cnpm install --save qr-image image * 2.引入模塊 *var qr = require('qr-image'); * * 3.使用 * * */ // 引入模塊 const Koa = require('koa'); const router = require('koa-router')(); /*引入是實例化路由推薦*/ const qr = require('qr-image'); const render = require('koa-art-template'); const path = require('path'); // 實例化 let app = new Koa(); // 配置 koa-art-template 模板引擎 render(app, { root: path.join(__dirname, 'views'), // 視圖的位置 extname: '.html', // 后綴名 debug: process.env.NODE_ENV !== 'production' // 是否開啟調試模式 }); router.get('/', async (ctx) => { await ctx.render('qcode', { //list: list }) }); //獲取二維碼 router.get('/qucode',async (ctx)=>{ var text = ctx.query.text; console.log(text); try { // var img = qr.image('http://localhost:8080/#/start?uid='+text,{size :10}); //https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E6%AD%A6%E6%B1%89%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5 var img = qr.image('https://www.baidu.com/'+text,{size :10}); ctx.type= 'image/png'; ctx.body = img; } catch (e) { ctx.type='text/html;charset=utf-8'; ctx.body='<h1>服務端錯誤</h1>'; } }); app.use(router.routes()); app.use(router.allowedMethods()); app.listen(8000); ~~~ ```