Javascript 实现二维码生成

javascript生成二维码需要用到一个js库：qrcanvas。

QRCanvas 能用来做什么

QRCanvas 的使用非常简单，无论是使用 vue 开发还是传统的 cdn 引入，都能快速地集成到已有的项目中，并且提供了详细的代码例子，也提供了可视化的工具来调节定制化参数，不仅能调整二维码大小、像素点的样式和颜色，还能动态添加背景图片、logo 等支持，这对于实现海报设计的个性化丰富非常友好，配合 html2canvas ，能够快速开发实现动态生成美观好看的二维码营销海报。

QRCanvas 功能特性

• API 非常简单，简单到只需要一个文本参数就能生成二维码
• 虽然调用简单，但也提供了强大的定制化功能
• 零依赖，只需要浏览器支canvas，兼容性极佳
• 支持 vue / react 等框架以及 cdn 引入的方式在前端使用，也支持 node.js 后端调用

安装和使用

安装QRCanvas

npm install qrcanvas//或者yarn add qrcanvas

 使用

import { qrcanvas } from 'qrcanvas';

const canvas = qrcanvas({
  data: 'hello, world'
});
document.body.appendChild(canvas);

第二种方式CDN引用

<div id="qrcode"></div>

<script src="https://cdn.jsdelivr.net/npm/qrcanvas@3"></script>

const canvas = qrcanvas.qrcanvas({
  data: 'hello, world'
});
document.getElementById('qrcode').appendChild(canvas);

免费开源使用说明

QRCanvas 的前身是 jsqrgen，基于 MIT 协议在 Github 上开源，任何人都可以免费下载安装使用，祝大家搬砖愉快