Skip to content

Commit

Permalink
feat(qrcode): custom drawing support (#580)
Browse files Browse the repository at this point in the history
  • Loading branch information
mynetfan authored May 11, 2021
1 parent 9d19546 commit 2b76b88
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 7 deletions.
18 changes: 11 additions & 7 deletions src/components/Qrcode/src/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus';
import { toDataURL } from 'qrcode';
import { downloadByUrl } from '/@/utils/file/download';
import { QrcodeDoneEventParams } from './types';
export default defineComponent({
name: 'QrCode',
Expand Down Expand Up @@ -38,10 +39,9 @@
validator: (v: string) => ['canvas', 'img'].includes(v),
},
},
emits: { done: (url: string) => !!url, error: (error: any) => !!error },
emits: { done: (data: QrcodeDoneEventParams) => !!data, error: (error: any) => !!error },
setup(props, { emit }) {
const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
const urlRef = ref<string>('');
async function createQrcode() {
try {
const { tag, value, options = {}, width, logo } = props;
Expand All @@ -58,8 +58,7 @@
content: renderValue,
options: options || {},
});
urlRef.value = url;
emit('done', url);
emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') });
return;
}
Expand All @@ -70,8 +69,7 @@
...options,
});
(unref(wrapRef) as HTMLImageElement).src = url;
urlRef.value = url;
emit('done', url);
emit('done', { url });
}
} catch (error) {
emit('error', error);
Expand All @@ -81,7 +79,13 @@
* file download
*/
function download(fileName?: string) {
const url = unref(urlRef);
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,
Expand Down
5 changes: 5 additions & 0 deletions src/components/Qrcode/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,8 @@ export type ToCanvasFn = (options: RenderQrCodeParams) => Promise<unknown>;
export interface QrCodeActionType {
download: (fileName?: string) => void;
}

export interface QrcodeDoneEventParams {
url: string;
ctx?: CanvasRenderingContext2D | null;
}
33 changes: 33 additions & 0 deletions src/views/demo/comp/qrcode/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,19 @@
<CollapseContainer title="配置大小示例" class="text-center qrcode-demo-item">
<QrCode :value="qrCodeUrl" :width="300" />
</CollapseContainer>

<CollapseContainer title="扩展绘制示例" class="text-center qrcode-demo-item">
<QrCode
:value="qrCodeUrl"
:width="200"
:options="{ margin: 5 }"
ref="qrDiyRef"
:logo="LogoImg"
@done="onQrcodeDone"
/>
<a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button>
<div class="msg"> 要进行扩展绘制则不能将tag设为img </div>
</CollapseContainer>
</div>
</PageWrapper>
</template>
Expand All @@ -73,16 +86,36 @@
components: { CollapseContainer, QrCode, PageWrapper },
setup() {
const qrRef = ref<Nullable<QrCodeActionType>>(null);
const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
function download() {
const qrEl = unref(qrRef);
if (!qrEl) return;
qrEl.download('文件名');
}
function downloadDiy() {
const qrEl = unref(qrDiyRef);
if (!qrEl) return;
qrEl.download('Qrcode');
}
function onQrcodeDone({ ctx }) {
if (ctx instanceof CanvasRenderingContext2D) {
// 额外绘制
ctx.fillStyle = 'black';
ctx.font = '16px "微软雅黑"';
ctx.textBaseline = 'bottom';
ctx.textAlign = 'center';
ctx.fillText('你帅你先扫', 100, 195, 200);
}
}
return {
onQrcodeDone,
qrCodeUrl,
LogoImg,
download,
downloadDiy,
qrRef,
qrDiyRef,
};
},
});
Expand Down

0 comments on commit 2b76b88

Please sign in to comment.