是什么?
在客户端将字符串经过加密转换成二维码图片
怎么实现
依赖qr-image工具
调用api获得图片二进制流
通过转码成base64格式进行图片展示
实现方式
/* eslint-disable */
import QrImage from 'qr-image'
/* utf.js - UTF-8 <=> UTF-16 convertion
*
* Copyright (C) 1999 Masanao Izumo
* Version: 1.0
* LastModified: Dec 25 1999
* This library is free. You can redistribute it and/or modify it.
*/
/*
* Interfaces:
* utf8 = utf16to8(utf16);
* utf16 = utf8to16(utf8);
*/
function utf16to8(str) {
var out, i, len, c
out = ''
len = str.length
for (i = 0; i < len; i++) {
c = str.charCodeAt(i)
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i)
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F))
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F))
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F))
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F))
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F))
}
}
return out
}
function utf8to16(str) {
var out, i, len, c
var char2, char3
out = ''
len = str.length
i = 0
while (i < len) {
c = str.charCodeAt(i++)
switch (c >> 4) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
// 0xxxxxxx
out += str.charAt(i - 1)
break
case 12:
case 13:
// 110x xxxx 10xx xxxx
char2 = str.charCodeAt(i++)
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F))
break
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = str.charCodeAt(i++)
char3 = str.charCodeAt(i++)
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0))
break
}
}
return out
}
/* Copyright (C) 1999 Masanao Izumo
* Version: 1.0
* LastModified: Dec 25 1999
* This library is free. You can redistribute it and/or modify it.
*/
/*
* Interfaces:
* b64 = base64encode(data);
* data = base64decode(b64);
*/
var base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
var base64DecodeChars = new Array(
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
-1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1)
function base64encode(str) {
var out, i, len
var c1, c2, c3
len = str.length
i = 0
out = ''
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2)
out += base64EncodeChars.charAt((c1 & 0x3) << 4)
out += '=='
break
}
c2 = str.charCodeAt(i++)
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2)
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4))
out += base64EncodeChars.charAt((c2 & 0xF) << 2)
out += '='
break
}
c3 = str.charCodeAt(i++)
out += base64EncodeChars.charAt(c1 >> 2)
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4))
out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6))
out += base64EncodeChars.charAt(c3 & 0x3F)
}
return out
}
function base64decode(str) {
var c1, c2, c3, c4
var i, len, out
len = str.length
i = 0
out = ''
while (i < len) {
/* c1 */
do {
c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff]
} while (i < len && c1 == -1)
if (c1 == -1) {
break
}
/* c2 */
do {
c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff]
} while (i < len && c2 == -1)
if (c2 == -1) {
break
}
out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4))
/* c3 */
do {
c3 = str.charCodeAt(i++) & 0xff
if (c3 == 61) {
return out
}
c3 = base64DecodeChars[c3]
} while (i < len && c3 == -1)
if (c3 == -1) {
break
}
out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2))
/* c4 */
do {
c4 = str.charCodeAt(i++) & 0xff
if (c4 == 61) {
return out
}
c4 = base64DecodeChars[c4]
} while (i < len && c4 == -1)
if (c4 == -1) {
break
}
out += String.fromCharCode(((c3 & 0x03) << 6) | c4)
}
return out
}
function arrayBufferToBase64(raw) {
let base64 = ''
let encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
let bytes = new Uint8Array(raw)
let byteLength = bytes.byteLength
let byteRemainder = byteLength % 3
let mainLength = byteLength - byteRemainder
let a, b, c, d
let chunk // Main loop deals with bytes in chunks of 3
for (let i = 0; i < mainLength; i = i + 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2] // Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12 // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6 // 4032 = (2^6 - 1) << 6
d = chunk & 63 // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
}
// Deal with the remaining bytes and padding
if (byteRemainder == 1) { // eslint-disable-line
chunk = bytes[mainLength]
a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2;
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4 // 3 = 2^2 - 1;
base64 += encodings[a] + encodings[b] + '=='
} else if (byteRemainder == 2) { // eslint-disable-line
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]
}
a = (chunk & 16128) >> 8 // 16128 = (2^6 - 1) << 8;
b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4;
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2 // 15 = 2^4 - 1;
base64 += encodings[a] + encodings[b] + encodings[c] + '='
return base64
}
function svg(str) {
let unit8 = QrImage.imageSync(str, { type: 'svg' })
let base64 = base64encode(unit8)
return `data:image/svg+xml;base64,${base64}`
}
function png(str) {
let unit8 = QrImage.imageSync(str)
let base64 = arrayBufferToBase64(unit8)
return 'data:image/png;base64,' + base64
}
export default {
utf16to8,
base64decode,
base64encode,
arrayBufferToBase64,
png,
svg
}