diff options
Diffstat (limited to 'src/tools/qr-code-generator/qr-code-generator.vue')
| -rw-r--r-- | src/tools/qr-code-generator/qr-code-generator.vue | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue new file mode 100644 index 0000000..e23f00a --- /dev/null +++ b/src/tools/qr-code-generator/qr-code-generator.vue @@ -0,0 +1,60 @@ +<template> + <n-card> + <n-grid cols="3" x-gap="12"> + <n-gi span="2"> + <n-form label-width="130" label-placement="left"> + <n-form-item label="Text:"> + <n-input v-model:value="text" placeholder="Your link or text..." /> + </n-form-item> + <n-form-item label="Foreground color:"> + <n-color-picker v-model:value="foreground" :modes="['hex']" /> + </n-form-item> + <n-form-item label="Background color:"> + <n-color-picker v-model:value="background" :modes="['hex']" /> + </n-form-item> + <n-form-item label="Error resistance:"> + <n-select v-model:value="errorCorrectionLevel" + :options="errorCorrectionLevels.map((value) => ({ label: value, value }))" /> + </n-form-item> + </n-form> + </n-gi> + <n-gi> + <n-space justify="center" align="center" vertical> + <n-image :src="qrcode" width="200" /> + <n-button @click="download" secondary>Download qr-code</n-button> + </n-space> + </n-gi> + </n-grid> + </n-card> +</template> + +<script setup lang="ts"> +import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; +import { useQRCode } from './useQRCode' +import { ref } from 'vue'; +import type { QRCodeErrorCorrectionLevel } from 'qrcode'; + + +const foreground = ref('#000000ff') +const background = ref('#ffffffff') +const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium') + +const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high'] + +const text = ref('https://it-tools.tech') +const { qrcode } = useQRCode({ + text, + color: { + background, + foreground + }, + errorCorrectionLevel, + options: { width: 1024 } +}) + +const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' }) + +</script> + +<style lang="less" scoped> +</style>
\ No newline at end of file |