Canvas 进阶（一）二维码的生成与扫码识别

最新推荐文章于 2024-10-12 09:26:17 发布

weixin_34106122

最新推荐文章于 2024-10-12 09:26:17 发布

阅读量2.9k

点赞数 1

文章标签：前端 javascript java ViewUI

原文链接：https://juejin.im/post/5d00b3626fb9a07ed74076a9

版权

本文介绍了如何使用canvas生成二维码以及实现扫码识别。在二维码生成部分，借助qrcodejs将文本转化为二维码并绘制在canvas上。对于扫码识别，通过llqrcode.js库解析canvas中的二维码图像。同时，文章提供了相关Demo和项目源码，帮助读者理解实现过程。

摘要由CSDN通过智能技术生成

背景

前些日子当前端面试官，问了一个问题：“你了解过canvas吗？”

“这个我知道，我有做过DEMO，这个不难吧，看着它的api接口就能实现！”

看着他这么（蜜汁）自信，我决定深入了解（为难）一下他！

“电商中大转盘，九宫格，刮刮乐，如何使用canvas实现，讲讲你的思路？”

“二维码的生成和扫码识别如何实现？”

“图片的粒子爆炸效果呢？”

“......”

因此，打算写一系列关于 canvas 的文章，探索学习提升自己的同时顺便分享给大家。

二维码的生成

二维码的生成需借助第三方库，利用其算法对文本转化成二维码，并用 canvas 绘画出来。利用 canvas.toDataURL('image/png') 获取二维码转 base64 值，再将其赋值给 img 标签的 src 属性

这里我使用了一个库，qrcodejs.

可点击《Demo》查看效果

使用方法如下：


<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Suporka Vue App</title>
    <style>
      .container {
        padding: 60px;
        margin: 0 auto;
        line-height: 50px;
      }
      input {
        display: inline-block;
        width: 200px;
        height: 32px;
        line-height: 1.5;
        padding: 4px 7px;
        font-size: 12px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        color: #515a6e;
        background-color: #fff;
        background-image: none;
        position: relative;
        cursor: text;
        transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
          box-shadow 0.2s ease-in-out;
      }
      button {
        color: #fff;
        background-color: #19be6b;
        border-color: #19be6b;
        outline: 0;
        vertical-align: middle;
        line-height: 1.5;
        display: inline-block;
        font-weight: 400;
        text-align: center;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding: 5px 15px 6px;
        font-size: 12px;
        border-radius: 4px;
        transition: color 0.2s linear, background-color 0.2s linear,
          border 0.2s linear, box-shadow 0.2s linear;
      }
      #qrcode {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <input
        type="text"
        placeholder="请输入您想转化成二维码的字符串"
        id="input"
      />
      <button onclick="creatQRcode();">一键生成</button>
      <div id="qrcode"></div>
    </div>
    <script src<

最低0.47元/天解锁文章