feat(tool): added qr-code generator

pages/tools/web/qrcode-generator.vue

@@ -0,0 +1,134 @@
+<template>
+  <ToolWrapper :config="config()">
+    <v-text-field
+      v-model="value"
+      outlined
+      label="Data"
+      :rules="rules.value"
+    />
+    <v-slider v-model="size" min="100" max="1920" label="Size (preview will not change): " thumb-label />
+    <v-select
+      v-model="level"
+      outlined
+      :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>
+
+    <div class="text-center mt-5 mb-5">
+      <qrcode-vue
+        :value="value"
+        :size="size"
+        :level="level"
+        :background="bgColor"
+        :foreground="fgColor"
+        render-as="svg"
+        class-name="qrcode-wrapper"
+      />
+    </div>
+
+    <div class="text-center mb-sm-2">
+      <v-btn class="mr-1" color="primary" @click="download('png')">
+        download as png
+      </v-btn>
+      <v-btn class="ml-1" color="primary" @click="download('svg')">
+        download as svg
+      </v-btn>
+    </div>
+  </ToolWrapper>
+</template>
+
+<script lang="ts">
+import {Component} from 'nuxt-property-decorator'
+import QrcodeVue from 'qrcode.vue'
+import colors from 'color-name'
+import {CopyableMixin} from '~/mixins/copyable.mixin'
+import Tool from '~/components/Tool.vue'
+import type {ToolConfig} from '~/types/ToolConfig'
+import {downloadBase64File} from '~/utils/file'
+import {stringToBase64} from '~/utils/convert'
+import ColorInput from '~/components/ColorInput.vue'
+
+@Component({
+  components: {QrcodeVue, ColorInput},
+  mixins: [CopyableMixin]
+})
+export default class QrcodeGenerator extends Tool {
+  config(): ToolConfig {
+    return {
+      title: 'QR-code generator',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.',
+      icon: 'mdi-qrcode',
+      keywords: ['editor']
+    }
+  }
+
+  value = 'https://it-tools.tech'
+  size = 300
+  level = 'M'
+  bgColor = 'transparent'
+  fgColor = '#ffffff'
+  levels = [
+    {text: 'Low', value: 'L'},
+    {text: 'Medium', value: 'M'},
+    {text: 'Quartile', value: 'Q'},
+    {text: 'High', value: 'H'}
+  ]
+
+  rules = {
+    value: [
+      (v: string) => v.length > 0 || 'Value is needed'
+    ],
+    color: [
+      (v: string) => {
+        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.'
+      }
+    ]
+  }
+
+  download(type: string) {
+    const svgEl = this.$el.querySelector('.qrcode-wrapper svg')!
+    const svgString = new XMLSerializer().serializeToString(svgEl)
+    const svgUrl = `data:image/svg+xml;base64,${stringToBase64(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')
+    }
+  }
+}
+
+</script>
+
+<style scoped lang="less">
+::v-deep .qrcode-wrapper {
+  & > * {
+    width: 300px !important;
+    height: 300px !important;
+  }
+}
+</style>