mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.7 KiB
99 lines
2.7 KiB
import { Editor, ElementType } from '../../editor'
|
|
import { BrowserQRCodeReader, BrowserQRCodeSvgWriter } from '@zxing/browser'
|
|
import { EncodeHintType } from '@zxing/library'
|
|
import { Dialog } from '../../components/dialog/Dialog'
|
|
|
|
function convertSvgElementToBase64(svgElement: HTMLElement | SVGSVGElement) {
|
|
return `data:image/svg+xml;base64,${btoa(
|
|
decodeURIComponent(svgElement.outerHTML)
|
|
)}`
|
|
}
|
|
|
|
declare module '../../editor' {
|
|
interface Command {
|
|
executeInsertBarcode2D(
|
|
content: string,
|
|
width: number,
|
|
height: number,
|
|
hints?: Map<EncodeHintType, any>
|
|
): void
|
|
}
|
|
}
|
|
|
|
export interface IBarcode2DOption {
|
|
isRegisterDetectorContextMenu?: boolean
|
|
}
|
|
|
|
export default function barcode2DPlugin(
|
|
editor: Editor
|
|
) {
|
|
const command = editor.command
|
|
|
|
// 插入二维码
|
|
command.executeInsertBarcode2D = (
|
|
content: string,
|
|
width: number,
|
|
height: number,
|
|
hints?: Map<EncodeHintType, any>
|
|
) => {
|
|
const codeWriter = new BrowserQRCodeSvgWriter()
|
|
// 配置默认边距
|
|
if (!hints) {
|
|
hints = new Map<EncodeHintType, any>()
|
|
}
|
|
if (!hints.has(EncodeHintType.MARGIN)) {
|
|
hints.set(EncodeHintType.MARGIN, 0)
|
|
}
|
|
// 生成svg元素并增加命名空间
|
|
const svgElement = codeWriter.write(content, width, height, hints)
|
|
svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
|
|
// 插入
|
|
command.executeInsertElementList([
|
|
{
|
|
type: ElementType.IMAGE,
|
|
value: convertSvgElementToBase64(svgElement),
|
|
width,
|
|
height
|
|
}
|
|
])
|
|
}
|
|
|
|
// 识别二维码
|
|
//if (options.isRegisterDetectorContextMenu) {
|
|
editor.register.contextMenuList([
|
|
{
|
|
name: '识别二维码链接',
|
|
icon: 'qrcode',
|
|
when: payload => {
|
|
return (
|
|
payload.startElement === payload.endElement &&
|
|
payload.startElement?.type === ElementType.IMAGE
|
|
)
|
|
},
|
|
callback: async (_, context) => {
|
|
const value = context.startElement?.value
|
|
if (!value) return
|
|
const codeReader = new BrowserQRCodeReader()
|
|
const result = await codeReader.decodeFromImageUrl(value)
|
|
const text = result.getText()
|
|
// 如果是超链接则跳转
|
|
// if (text && /^(http|https):.*/.test(text)) {
|
|
// window.open(text, '_blank')
|
|
// }
|
|
new Dialog({
|
|
title: '识别内容',
|
|
data: [
|
|
{
|
|
type: 'text',
|
|
label: '识别内容',
|
|
name: 'name',
|
|
placeholder: '请输入文本',
|
|
value: text
|
|
},
|
|
]
|
|
})
|
|
}
|
|
}
|
|
])
|
|
//}
|
|
}
|
|
|