mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 08:16:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: added qr-code generator

Browse source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-23 00:01:14 +02:00
parent b75603f311
commit a20858dfb8
No known key found for this signature in database
GPG key ID: DBD997E935996158
8 changed files with 226 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

137
src/routes/tools/QRCodeGenerator.vue Normal file
View file

@ -0,0 +1,137 @@
<template>
<v-card class="single-card">
<v-card-title>QR-code generator</v-card-title>
<v-card-text>
<v-row justify="center" align="center">
<v-col cols="12" lg="6" sm="12">
<v-text-field
outlined
v-model="value"
label="Data"
:rules="rules.value"
/>
<v-slider v-model="size" min="100" max="1920" label="Size (preview will not change): " thumb-label/>
<v-select
outlined
v-model="level"
:items="levels"
label="Error resistance"
/>
<v-row>
<v-col cols="12" md="6" sm="12">
<ColorInput v-model="fgcolor" label="Foreground color"/>
</v-col>
<v-col cols="12" md="6" sm="12">
<ColorInput v-model="bgcolor" label="Background color"/>
</v-col>
</v-row>
</v-col>
<v-col cols="12" lg="6" sm="12" class="text-center">
<qrcode-vue
:value="input"
:size="size"
:level="level"
:background="bgcolor"
:foreground="fgcolor"
render-as="svg"
class-name="qrcode-wrapper"
/>
</v-col>
</v-row>
<div class="text-center mt-3 mb-sm-2">
<v-btn @click="download('png')" class="mr-1" color="primary">download as png</v-btn>
<v-btn @click="download('svg')" class="ml-1" color="primary">download as svg</v-btn>
</div>
</v-card-text>
</v-card>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import colors from "color-name";
import ColorInput from "../../components/ColorInput";
import {downloadBase64File} from "../../utils/helpers";
export default {
name: "QRCodeGenerator",
data: () => ({
value: 'https://it-tools.tech',
size: 300,
level: 'M',
bgcolor: '#ffffff',
fgcolor: '#000000',
levels: [
{text: 'Low', value: 'L'},
{text: 'Medium', value: 'M'},
{text: 'Quartile', value: 'Q'},
{text: 'High', value: 'H'}
],
rules: {
value: [
v => v.length > 0 || 'Value is needed'
],
color: [
v => {
v = v.trim()
const isFFFFFF = /^#(?:[0-9a-fA-F]{6})$/.test(v);
const isFFF = /^#(?:[0-9a-fA-F]{3})$/.test(v);
const isRGB = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.test(v);
const isHSL = /^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/.test(v);
const isKeyword = v in colors;
const isTransparent = v === 'transparent';
return isFFFFFF || isFFF || isKeyword || isTransparent || isRGB || isHSL || 'Incorrect color.'
}
]
}
}),
methods: {
download(type) {
const svgEl = this.$el.querySelector('.qrcode-wrapper svg');
const svgString = new XMLSerializer().serializeToString(svgEl);
const svgUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
if (type === 'png') {
const canvas = document.createElement("canvas");
canvas.width = this.size;
canvas.height = this.size;
const ctx = canvas.getContext("2d");
const image = new Image();
image.onload = function () {
ctx.drawImage(image, 0, 0);
const result = canvas.toDataURL();
downloadBase64File(result, 'qr-code');
};
image.src = svgUrl;
} else {
downloadBase64File(svgUrl, 'qr-code');
}
}
},
computed: {
input() {
return this.value
}
},
components: {
QrcodeVue,
ColorInput
}
}
</script>
<style scoped lang="less">
::v-deep .qrcode-wrapper {
& > * {
width: 300px !important;
height: 300px !important;
}
}
</style>