10 changed files with 9 additions and 299 deletions
@ -1,5 +0,0 @@ |
|||||||
import qrCode from './src/Qrcode.vue' |
|
||||||
import { withInstall } from '@/utils' |
|
||||||
|
|
||||||
export const QrCode = withInstall(qrCode) |
|
||||||
export * from './src/typing' |
|
@ -1,118 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { onMounted, ref, unref, watch } from 'vue' |
|
||||||
import { toDataURL } from 'qrcode' |
|
||||||
import type { LogoType, QRCodeRenderersOptions } from './qrcodePlus' |
|
||||||
import { toCanvas } from './qrcodePlus' |
|
||||||
import type { QrcodeDoneEventParams } from './typing' |
|
||||||
import { downloadByUrl } from '@/utils/file/download' |
|
||||||
|
|
||||||
defineOptions({ name: 'QrCode' }) |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
value: { |
|
||||||
type: [String, Array] as PropType<string | any[]>, |
|
||||||
default: null, |
|
||||||
}, |
|
||||||
// 参数 |
|
||||||
options: { |
|
||||||
type: Object as PropType<QRCodeRenderersOptions>, |
|
||||||
default: null, |
|
||||||
}, |
|
||||||
// 宽度 |
|
||||||
width: { |
|
||||||
type: Number as PropType<number>, |
|
||||||
default: 200, |
|
||||||
}, |
|
||||||
// 中间logo图标 |
|
||||||
logo: { |
|
||||||
type: [String, Object] as PropType<Partial<LogoType> | string>, |
|
||||||
default: '', |
|
||||||
}, |
|
||||||
// img 不支持内嵌logo |
|
||||||
tag: { |
|
||||||
type: String as PropType<'canvas' | 'img'>, |
|
||||||
default: 'canvas', |
|
||||||
validator: (v: string) => ['canvas', 'img'].includes(v), |
|
||||||
}, |
|
||||||
}) |
|
||||||
const emit = defineEmits({ |
|
||||||
done: (data: QrcodeDoneEventParams) => !!data, |
|
||||||
error: (error: any) => !!error, |
|
||||||
}) |
|
||||||
|
|
||||||
const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null) |
|
||||||
async function createQrcode() { |
|
||||||
try { |
|
||||||
const { tag, value, options = {}, width, logo } = props |
|
||||||
const renderValue = String(value) |
|
||||||
const wrapEl = unref(wrapRef) |
|
||||||
|
|
||||||
if (!wrapEl) |
|
||||||
return |
|
||||||
|
|
||||||
if (tag === 'canvas') { |
|
||||||
const url: string = await toCanvas({ |
|
||||||
canvas: wrapEl, |
|
||||||
width, |
|
||||||
logo: logo as any, |
|
||||||
content: renderValue, |
|
||||||
options: options || {}, |
|
||||||
}) |
|
||||||
emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') }) |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
if (tag === 'img') { |
|
||||||
const url = await toDataURL(renderValue, { |
|
||||||
errorCorrectionLevel: 'H', |
|
||||||
width, |
|
||||||
...options, |
|
||||||
}) |
|
||||||
;(unref(wrapRef) as HTMLImageElement).src = url |
|
||||||
emit('done', { url }) |
|
||||||
} |
|
||||||
} |
|
||||||
catch (error) { |
|
||||||
emit('error', error) |
|
||||||
} |
|
||||||
} |
|
||||||
/** |
|
||||||
* file download |
|
||||||
*/ |
|
||||||
function download(fileName?: string) { |
|
||||||
let url = '' |
|
||||||
const wrapEl = unref(wrapRef) |
|
||||||
if (wrapEl instanceof HTMLCanvasElement) |
|
||||||
url = wrapEl.toDataURL() |
|
||||||
else if (wrapEl instanceof HTMLImageElement) |
|
||||||
url = wrapEl.src |
|
||||||
|
|
||||||
if (!url) |
|
||||||
return |
|
||||||
downloadByUrl({ |
|
||||||
url, |
|
||||||
fileName, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(createQrcode) |
|
||||||
|
|
||||||
// 监听参数变化重新生成二维码 |
|
||||||
watch( |
|
||||||
props, |
|
||||||
() => { |
|
||||||
createQrcode() |
|
||||||
}, |
|
||||||
{ |
|
||||||
deep: true, |
|
||||||
}, |
|
||||||
) |
|
||||||
|
|
||||||
defineExpose({ download }) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<component :is="tag" ref="wrapRef" /> |
|
||||||
</div> |
|
||||||
</template> |
|
@ -1,31 +0,0 @@ |
|||||||
import { toCanvas } from 'qrcode' |
|
||||||
import type { QRCodeRenderersOptions } from 'qrcode' |
|
||||||
import { cloneDeep } from 'lodash-es' |
|
||||||
import type { ContentType, RenderQrCodeParams } from './typing' |
|
||||||
|
|
||||||
export function renderQrCode({ canvas, content, width = 0, options: params = {} }: RenderQrCodeParams) { |
|
||||||
const options = cloneDeep(params) |
|
||||||
// 容错率,默认对内容少的二维码采用高容错率,内容多的二维码采用低容错率
|
|
||||||
options.errorCorrectionLevel = options.errorCorrectionLevel || getErrorCorrectionLevel(content) |
|
||||||
|
|
||||||
return getOriginWidth(content, options).then((_width: number) => { |
|
||||||
options.scale = width === 0 ? undefined : (width / _width) * 4 |
|
||||||
return toCanvas(canvas, content, options) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// 得到原QrCode的大小,以便缩放得到正确的QrCode大小
|
|
||||||
function getOriginWidth(content: ContentType, options: QRCodeRenderersOptions) { |
|
||||||
const _canvas = document.createElement('canvas') |
|
||||||
return toCanvas(_canvas, content, options).then(() => _canvas.width) |
|
||||||
} |
|
||||||
|
|
||||||
// 对于内容少的QrCode,增大容错率
|
|
||||||
function getErrorCorrectionLevel(content: ContentType) { |
|
||||||
if (content.length > 36) |
|
||||||
return 'M' |
|
||||||
else if (content.length > 16) |
|
||||||
return 'Q' |
|
||||||
else |
|
||||||
return 'H' |
|
||||||
} |
|
@ -1,85 +0,0 @@ |
|||||||
import type { LogoType, RenderQrCodeParams } from './typing' |
|
||||||
import { isString } from '@/utils/is' |
|
||||||
|
|
||||||
export function drawLogo({ canvas, logo }: RenderQrCodeParams) { |
|
||||||
if (!logo) { |
|
||||||
return new Promise((resolve) => { |
|
||||||
resolve((canvas as HTMLCanvasElement).toDataURL()) |
|
||||||
}) |
|
||||||
} |
|
||||||
const canvasWidth = (canvas as HTMLCanvasElement).width |
|
||||||
const { logoSize = 0.15, bgColor = '#ffffff', borderSize = 0.05, crossOrigin, borderRadius = 8, logoRadius = 0 } = logo as LogoType |
|
||||||
|
|
||||||
const logoSrc: string = isString(logo) ? logo : logo.src |
|
||||||
const logoWidth = canvasWidth * logoSize |
|
||||||
const logoXY = (canvasWidth * (1 - logoSize)) / 2 |
|
||||||
const logoBgWidth = canvasWidth * (logoSize + borderSize) |
|
||||||
const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2 |
|
||||||
|
|
||||||
const ctx = canvas.getContext('2d') |
|
||||||
if (!ctx) |
|
||||||
return |
|
||||||
|
|
||||||
// logo 底色
|
|
||||||
canvasRoundRect(ctx)(logoBgXY, logoBgXY, logoBgWidth, logoBgWidth, borderRadius) |
|
||||||
ctx.fillStyle = bgColor |
|
||||||
ctx.fill() |
|
||||||
|
|
||||||
// logo
|
|
||||||
const image = new Image() |
|
||||||
if (crossOrigin || logoRadius) |
|
||||||
image.setAttribute('crossOrigin', crossOrigin || 'anonymous') |
|
||||||
|
|
||||||
image.src = logoSrc |
|
||||||
|
|
||||||
// 使用image绘制可以避免某些跨域情况
|
|
||||||
const drawLogoWithImage = (image: CanvasImageSource) => { |
|
||||||
ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth) |
|
||||||
} |
|
||||||
|
|
||||||
// 使用canvas绘制以获得更多的功能
|
|
||||||
const drawLogoWithCanvas = (image: HTMLImageElement) => { |
|
||||||
const canvasImage = document.createElement('canvas') |
|
||||||
canvasImage.width = logoXY + logoWidth |
|
||||||
canvasImage.height = logoXY + logoWidth |
|
||||||
const imageCanvas = canvasImage.getContext('2d') |
|
||||||
if (!imageCanvas || !ctx) |
|
||||||
return |
|
||||||
imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth) |
|
||||||
|
|
||||||
canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius) |
|
||||||
if (!ctx) |
|
||||||
return |
|
||||||
const fillStyle = ctx.createPattern(canvasImage, 'no-repeat') |
|
||||||
if (fillStyle) { |
|
||||||
ctx.fillStyle = fillStyle |
|
||||||
ctx.fill() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 将 logo绘制到 canvas上
|
|
||||||
return new Promise((resolve) => { |
|
||||||
image.onload = () => { |
|
||||||
logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image) |
|
||||||
resolve((canvas as HTMLCanvasElement).toDataURL()) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// copy来的方法,用于绘制圆角
|
|
||||||
function canvasRoundRect(ctx: CanvasRenderingContext2D) { |
|
||||||
return (x: number, y: number, w: number, h: number, r: number) => { |
|
||||||
const minSize = Math.min(w, h) |
|
||||||
if (r > minSize / 2) |
|
||||||
r = minSize / 2 |
|
||||||
|
|
||||||
ctx.beginPath() |
|
||||||
ctx.moveTo(x + r, y) |
|
||||||
ctx.arcTo(x + w, y, x + w, y + h, r) |
|
||||||
ctx.arcTo(x + w, y + h, x, y + h, r) |
|
||||||
ctx.arcTo(x, y + h, x, y, r) |
|
||||||
ctx.arcTo(x, y, x + w, y, r) |
|
||||||
ctx.closePath() |
|
||||||
return ctx |
|
||||||
} |
|
||||||
} |
|
@ -1,5 +0,0 @@ |
|||||||
// 参考 qr-code-with-logo 进行ts版本修改
|
|
||||||
import { toCanvas } from './toCanvas' |
|
||||||
|
|
||||||
export * from './typing' |
|
||||||
export { toCanvas } |
|
@ -1,11 +0,0 @@ |
|||||||
import { renderQrCode } from './drawCanvas' |
|
||||||
import { drawLogo } from './drawLogo' |
|
||||||
import type { RenderQrCodeParams } from './typing' |
|
||||||
|
|
||||||
export function toCanvas(options: RenderQrCodeParams) { |
|
||||||
return renderQrCode(options) |
|
||||||
.then(() => { |
|
||||||
return options |
|
||||||
}) |
|
||||||
.then(drawLogo) as Promise<string> |
|
||||||
} |
|
@ -1,38 +0,0 @@ |
|||||||
import type { QRCodeRenderersOptions, QRCodeSegment } from 'qrcode' |
|
||||||
|
|
||||||
export type ContentType = string | QRCodeSegment[] |
|
||||||
|
|
||||||
export type { QRCodeRenderersOptions } |
|
||||||
|
|
||||||
export interface LogoType { |
|
||||||
src: string |
|
||||||
logoSize: number |
|
||||||
borderColor: string |
|
||||||
bgColor: string |
|
||||||
borderSize: number |
|
||||||
crossOrigin: string |
|
||||||
borderRadius: number |
|
||||||
logoRadius: number |
|
||||||
} |
|
||||||
|
|
||||||
export interface RenderQrCodeParams { |
|
||||||
canvas: any |
|
||||||
content: ContentType |
|
||||||
width?: number |
|
||||||
options?: QRCodeRenderersOptions |
|
||||||
logo?: LogoType | string |
|
||||||
image?: HTMLImageElement |
|
||||||
downloadName?: string |
|
||||||
download?: boolean | Fn |
|
||||||
} |
|
||||||
|
|
||||||
export type ToCanvasFn = (options: RenderQrCodeParams) => Promise<unknown> |
|
||||||
|
|
||||||
export interface QrCodeActionType { |
|
||||||
download: (fileName?: string) => void |
|
||||||
} |
|
||||||
|
|
||||||
export interface QrcodeDoneEventParams { |
|
||||||
url: string |
|
||||||
ctx?: CanvasRenderingContext2D | null |
|
||||||
} |
|
Loading…
Reference in new issue