近期，由于项目开发的需求，需要前端实现图片二维码的解析。
由于需求的需要，这边调研了一下，发现很多人都有着类似的需求，网上给的解决方案也很多，但是感觉还是有些。。。。。
又想到之前做过前端生成二维码。
于是这里就封装一个插件，同时满足前端js生成二维码，前端js解析本地图片二维码。 这既满足了自己的项目需求，也满足了个人的兴趣需要。 同时也希望可以帮助有着同样需求的观众老爷😜
步入正题：
html 代码
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src='./qrcode.min.js'></script> <title>Document</title> </head> <body> <div> <input type="file" id='file' value='选择需要解析的二维码'> <li class="code-result"></li> <div id="qrcode"></div> <input type="text" value='' id='text'> <button class="make-code">生成二维码</button> <br/> <button class="clear">清除二维码</button> <br/> <button class="init">再次初始化</button> </div> </body> </html>js 代码
<script> // 初始化生成二维码 function initQrCode() { QRCode.initCode('qrcode', { text: '张三李四王五', }); } initQrCode(); // 再次手动生成二维码 $('.make-code').click(function () { const text = $('#text').val(); QRCode.makeCode(text); }) // 解析二维码 $('#file').change(function () { const file = $(this)[0].files[0] QRCode.deCode(file, (msg) => { console.log(msg); $('.code-result').html(msg); }) }) $('.clear').click(function () { QRCode.clearCode(); }) $('.init').click(function () { initQrCode(); }) </script>angular.js 中使用 // html <div #qrcode></div> // ts import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import * as QRCodeSdk from "@styleofpicasso/qrcode"; export class HomeComponent implements AfterViewInit { @ViewChild('qrcode', {static: false}) qrcode: ElementRef; constructor(private router: Router) { } ngAfterViewInit() { QRCodeSdk.initCode(this.qrcode.nativeElement, {text: '朱满要真水'}); } } vue.js 中使用 // html <div ref="qrcode></div> // js import * as QRCodeSdk from "@styleofpicasso/qrcode"; export default { name: 'text', data() { return { options: { text: "https://github.com/ushelp/EasyQRCodeJS" } } } mounted(){ QRCodeSdk.initCode(this.$refs.qrcode, options); }, methods:{ btnClick(){ } } } react.js中使用 // js import React from 'react'; import * as QRCodeSdk from "@styleofpicasso/qrcode"; class TestComponent extends React.Component { constructor(props) { super(props); this.qrcode = React.createRef(); } componentDidMount() { // Options var options = { text: "https://github.com/ushelp/EasyQRCodeJS" } // Create new QRCode Object QRCodeSdk.initCode( this.qrcode.current, options); } render() { return ( <div className = "test"> <div ref={this.qrcode}></div> </div> ); } } export default TestComponent // ts import React, { useEffect } from "react"; import * as QRCodeSdk from "@styleofpicasso/qrcode"; function TestComponent() { const code = React.createRef<HTMLDivElement>(); useEffect(() => { QRCodeSdk(code.current, { text: "https://github.com/ushelp/EasyQRCodeJS" }); }, [code]); return ( <div className="App"> <header className="App-header"> <div ref={code}></div> </header> </div> ); } export default TestComponent;
实现功能：
QRCode 支持本地图片的二维码解析， 二维码生成 / 带 logo 的二维码的生成 / 二维码的清除 / 二维码大小的设置 / 二维码的设置
1. 安装
For JQuery and original js
Download js lib from npmjs
npm i @styleofpicasso/qrcodeadd js to html
<script type="text/javascript" src="/qrcode.min.js"></script> For TypeScript such as Angular Vue React npm i @styleofpicasso/qrcode --save-dev2. 引入
import * as QRCode from '@styleofpicasso/qrcode';3. 使用
初始化生成二维码 /** * id 生成二维码的容器 * config 初始化二维码的配置信息 */ QRcode.initCode(id, config);config的配置信息
// 默认配置 （已经添加过的配置信息） { // 二维码的默认配置 width: 128, height: 128, colorDark: '#000', colorLight: '#fff', correctLevel: QRCode.CorrectLevel.H, dotScale: 1, // 二维码的生成工具（canvas 或 svg） 默认 canvas drawer: 'canvas' } // 必须添加的配置 { // 初始生成二维码的内容 text: '' } // 可以添加的配置 { // 二维码logo的配置信息 logo: undefined, logoWidth: undefined, logoHeight: undefined, logoBackgroundColor: '#fff', logoBackgroundTransparent: false, // 二维码背景的配置信息 backgroundImage: '', // Background Image backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. autoColor: false, // 二维码标题的配置信息 title: 'QR Title', // content titleFont: "bold 18px Arial", // font. default is "bold 16px Arial" titleColor: "#004284", // color. default is "#000" titleBackgroundColor: "#fff", // background color. default is "#fff" titleHeight: 70, // height, including subTitle. default is 0 titleTop: 25 // d // 二维码副标题的配置信息 subTitle: 'QR subTitle', // content subTitleFont: "14px Arial", // font. default is "14px Arial" subTitleColor: "#004284", // color. default is "4F4F4F" subTitleTop: 40 // draws y coordinates. default is 0 // 二维码的事件配置 onRenderingStart: undefined, onRenderingEnd: undefined, }再次生成二维码 /** * 根据内容生成二维码 * text 二维码内容 */ QRCode.makeCode(text); 二维码的清除 /** * 清除二维码 */ QRCode.clearCode(); 二维码大小调整 /** * 二维码的大小调整 * width : 宽 * height: 高 */ QRCode.resizeCode(width, height) 图片二维码的解析 /** * 图片二维码的解析功能 * file 本地选择的图片文件； 或 有效图片的路径 * callback 解析成功之后的回调函数， 参数： 解析的内容 当解析失败时，返回undefine， 成功返回解析数据 */ QRCode.deCode(file, callback);
https://www.npmjs.com/package/@styleofpicasso/qrcode
以上便是二维码插件的功能说明以及使用说明，希望可以帮到大家， 若是有什么不足的地方也希望大家指出
