feat(new tools): Barcode Reader and Generator

Fix #437 and #805

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -33,3 +34,31 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue?: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const storageDefaultValue = storageRef.value ?? defaultValue;
+
+  const proxy = useRouteQuery(name, transformer.toQuery(storageDefaultValue as never));
+
+  const ref = computed<T>({
+    get() {
+      return transformer.fromQuery(proxy.value) as unknown as T;
+    },
+    set(value) {
+      proxy.value = transformer.toQuery(value as never);
+    },
+  });
+
+  watch(
+    ref,
+    (newValue) => {
+      storageRef.value = newValue;
+    },
+  );
+
+  return ref;
+}

src/tools/barcode-generator/barcode-generator.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import VueBarcode from '@chenfengyuan/vue-barcode';
+import JsBarcode from 'jsbarcode';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const foreground = useQueryParamOrStorage({ name: 'fg', storageName: 'barcode-gen:fg', defaultValue: '#000000ff' });
+const background = useQueryParamOrStorage({ name: 'bg', storageName: 'barcode-gen:bg', defaultValue: '#ffffffff' });
+const width = useQueryParamOrStorage({ name: 'width', storageName: 'barcode-gen:width', defaultValue: 2 });
+const height = useQueryParamOrStorage({ name: 'height', storageName: 'barcode-gen:height', defaultValue: 100 });
+const margin = useQueryParamOrStorage({ name: 'margin', storageName: 'barcode-gen:margin', defaultValue: 10 });
+const format = useQueryParamOrStorage({ name: 'format', storageName: 'barcode-gen:format', defaultValue: 'auto' });
+const displayValue = useQueryParamOrStorage({ name: 'display', storageName: 'barcode-gen:display', defaultValue: true });
+const ean128 = useQueryParamOrStorage({ name: 'ean128', storageName: 'barcode-gen:ean128', defaultValue: false });
+const value = ref('123456789');
+
+const options = computed(() => ({
+  lineColor: foreground.value,
+  background: background.value,
+  width: width.value,
+  height: height.value,
+  margin: margin.value,
+  format: format.value === 'auto' ? 'CODE128' : format.value,
+  displayValue: displayValue.value,
+  ean128: ean128.value,
+  text: value.value,
+}));
+
+const formats = [
+  'auto',
+  'CODE39',
+  'CODE128', 'CODE128A', 'CODE128B', 'CODE128C',
+  'EAN13', 'EAN8', 'EAN5', 'EAN2', 'UPC', 'UPCE',
+  'ITF14',
+  'ITF',
+  'MSI', 'MSI10', 'MSI11', 'MSI1010', 'MSI1110',
+  'pharmacode',
+  'codabar',
+  'GenericBarcode',
+];
+
+const barcodePNG = computed(() => {
+  const canvas = document.createElement('canvas');
+  JsBarcode(canvas, value.value, options.value);
+  return canvas.toDataURL('image/png');
+});
+
+const { download } = useDownloadFileFromBase64({ source: barcodePNG, filename: 'barcode.png' });
+</script>
+
+<template>
+  <c-card>
+    <n-grid x-gap="12" y-gap="12" cols="1 600:3">
+      <n-gi span="2">
+        <c-input-text
+          v-model:value="value"
+          label-position="left"
+          label-width="130px"
+          label-align="right"
+          label="Text:"
+          multiline
+          rows="1"
+          autosize
+          placeholder="Your text..."
+          mb-6
+        />
+        <n-form label-width="130" label-placement="left">
+          <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="Width:">
+            <n-input-number v-model:value="width" :min="0" />
+          </n-form-item>
+          <n-form-item label="Height:">
+            <n-input-number v-model:value="height" :min="0" />
+          </n-form-item>
+          <n-form-item label="Margin:">
+            <n-input-number v-model:value="margin" :min="0" />
+          </n-form-item>
+          <n-form-item label="Display text:">
+            <n-checkbox v-model:checked="displayValue" />
+          </n-form-item>
+          <c-select
+            v-model:value="format"
+            label="Format:"
+            label-position="left"
+            label-width="130px"
+            label-align="right"
+            :options="formats.map((value) => ({ label: value, value }))"
+          />
+        </n-form>
+      </n-gi>
+      <n-gi>
+        <div flex flex-col items-center gap-3>
+          <VueBarcode
+            :options="options"
+            :value="value"
+          />
+          <c-button @click="download">
+            Download barcode
+          </c-button>
+        </div>
+      </n-gi>
+    </n-grid>
+  </c-card>
+</template>

src/tools/barcode-generator/index.ts

@@ -0,0 +1,12 @@
+import { Barcode } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Barcode Generator',
+  path: '/barcode-generator',
+  description: 'Barcode generator',
+  keywords: ['barcode', 'generator'],
+  component: () => import('./barcode-generator.vue'),
+  icon: Barcode,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/barcode-reader/barcode-reader.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { BarcodeFormat, BrowserMultiFormatReader } from '@zxing/library';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const imageBase64 = ref('');
+const barCode = computedAsync(async () => {
+  if (imageBase64.value === '') {
+    return { text: '', format: '', error: '' };
+  }
+  try {
+    const barcodeReader = new BrowserMultiFormatReader();
+    const result = (await barcodeReader.decodeFromImageUrl(imageBase64.value));
+    return { text: result.getText(), format: BarcodeFormat[result.getBarcodeFormat()], error: '' };
+  }
+  catch (e: any) {
+    return { error: e.toString(), text: '', format: '' };
+  }
+});
+
+function blobToBase64(blob: Blob) {
+  if (blob === null) {
+    return Promise.resolve('');
+  }
+  return new Promise<string>((resolve, _reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function onUpload(file: File) {
+  if (file) {
+    imageBase64.value = await blobToBase64(file);
+  }
+}
+</script>
+
+<template>
+  <div>
+    <c-file-upload
+      title="Drag and drop a BarCode here, or click to select a file"
+      :paste-image="true"
+      mb-3
+      @file-upload="onUpload"
+    />
+
+    <div v-if="barCode?.text">
+      <n-divider />
+
+      <h3>Decoded <span v-if="barCode?.format">({{ barCode?.format }})</span></h3>
+      <TextareaCopyable
+        :value="barCode?.text"
+        :word-wrap="true"
+      />
+    </div>
+    <c-alert v-if="barCode?.error">
+      {{ barCode?.error }}
+    </c-alert>
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/barcode-reader/index.ts

@@ -0,0 +1,12 @@
+import { Barcode } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Barcode Reader',
+  path: '/barcode-reader',
+  description: 'Barcode reader',
+  keywords: ['barcode', 'reader'],
+  component: () => import('./barcode-reader.vue'),
+  icon: Barcode,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/index.ts

@@ -81,6 +81,8 @@ import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
 import { tool as yamlViewer } from './yaml-viewer';
+import { tool as barcodeReader } from './barcode-reader';
+import { tool as barcodeGenerator } from './barcode-generator';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -132,7 +134,14 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Images and videos',
-    components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+    components: [
+      qrCodeGenerator,
+      wifiQrCodeGenerator,
+      svgPlaceholderGenerator,
+      cameraRecorder,
+      barcodeReader,
+      barcodeGenerator,
+    ],
   },
   {
     name: 'Development',