html、vue、react、angular 前端二维码生成、二维码解析
最编程
2024-05-08 19:45:11
...
本文的背景
近期,由于项目开发的需求,需要前端实现图片二维码的解析。
由于需求的需要,这边调研了一下,发现很多人都有着类似的需求,网上给的解决方案也很多,但是感觉还是有些。。。。。
又想到之前做过前端生成二维码。
于是这里就封装一个插件,同时满足前端js生成二维码,前端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;
插件名称 @styleofpicasso/qrcode
实现功能:
QRCode 支持本地图片的二维码解析, 二维码生成 / 带 logo 的二维码的生成 / 二维码的清除 / 二维码大小的设置 / 二维码的设置
插件的使用说明
1. 安装
-
For JQuery and original js
Download js lib from npmjs
npm i @styleofpicasso/qrcode
add js to html
<script type="text/javascript" src="/qrcode.min.js"></script>
- For TypeScript such as Angular Vue React
npm i @styleofpicasso/qrcode --save-dev
2. 引入
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);
npm地址
https://www.npmjs.com/package/@styleofpicasso/qrcode
以上便是二维码插件的功能说明以及使用说明,希望可以帮到大家, 若是有什么不足的地方也希望大家指出