Переписал на vue3

src/composables/useQrCode.js

@@ -0,0 +1,149 @@
+import { ref, nextTick } from 'vue'
+import QRCode from 'qrcode'
+
+export function useQrCode() {
+  const textInput = ref('')
+  const error = ref('')
+  const errorColor = ref('red')
+  const scale = ref(1)
+  const hasQr = ref(false)
+  const qrCanvasRef = ref(null)
+
+  function logMessage(message, color = 'red') {
+    error.value = message
+    errorColor.value = color
+  }
+
+  function applyScale() {
+    const canvas = qrCanvasRef.value
+    if (!canvas) return
+    canvas.style.transform = `scale(${scale.value})`
+    canvas.style.transformOrigin = 'top'
+  }
+
+  async function generateQR() {
+    const userText = textInput.value.trim()
+    if (!userText) {
+      logMessage('Введите текст для генерации QR-кода!')
+      return
+    }
+
+    localStorage.setItem('userText', userText)
+    hasQr.value = true
+
+    await nextTick()
+
+    try {
+      await QRCode.toCanvas(qrCanvasRef.value, userText)
+      logMessage('')
+      applyScale()
+
+      const canvasWidth = qrCanvasRef.value.getBoundingClientRect().width
+      if (canvasWidth > window.innerWidth * 0.8) {
+        scale.value = 1
+        applyScale()
+      }
+    } catch (err) {
+      console.error(err)
+      logMessage('Ошибка при генерации QR-кода.')
+      hasQr.value = false
+    }
+  }
+
+  function downloadQR() {
+    const userText = textInput.value.slice(0, 20)
+    const canvas = qrCanvasRef.value
+
+    if (!canvas) {
+      logMessage('QR-код не сгенерирован!')
+      return
+    }
+    if (!userText) {
+      logMessage('Отсутствует текст в поле для ввода')
+      return
+    }
+
+    const link = document.createElement('a')
+    link.href = canvas.toDataURL('image/png')
+    link.download = `qr-code-${userText}.png`
+    link.click()
+    logMessage('QR-код скачан!', 'green')
+  }
+
+  function clearQR() {
+    textInput.value = ''
+    hasQr.value = false
+    error.value = ''
+    scale.value = 1
+    localStorage.removeItem('userText')
+    localStorage.removeItem('scale')
+  }
+
+  function zoomIn() {
+    const canvas = qrCanvasRef.value
+    if (!canvas) {
+      logMessage('До генерации QR кода маштаб менять нельзя')
+      return
+    }
+
+    localStorage.setItem('scale', scale.value)
+    const canvasWidth = canvas.getBoundingClientRect().width
+
+    if (canvasWidth + 0.1 < window.innerWidth * 0.8) {
+      scale.value += 0.1
+      applyScale()
+    } else {
+      logMessage('Достигнут максимальный размер QR кода')
+    }
+  }
+
+  function zoomOut() {
+    const canvas = qrCanvasRef.value
+    if (!canvas) {
+      logMessage('До генерации QR кода маштаб менять нельзя')
+      return
+    }
+
+    localStorage.setItem('scale', scale.value)
+    const canvasWidth = canvas.getBoundingClientRect().width
+
+    if (canvasWidth > window.innerWidth * 0.8) {
+      scale.value = 1
+    }
+
+    if (scale.value > 0.5) {
+      scale.value -= 0.1
+      applyScale()
+    } else {
+      logMessage('Достигнут минимальный размер QR кода')
+    }
+  }
+
+  async function restoreFromStorage() {
+    const savedScale = localStorage.getItem('scale')
+    if (savedScale) {
+      scale.value = Number(savedScale)
+    }
+
+    const savedText = localStorage.getItem('userText')
+    if (savedText) {
+      textInput.value = savedText
+      await generateQR()
+    }
+  }
+
+  return {
+    textInput,
+    error,
+    errorColor,
+    scale,
+    hasQr,
+    qrCanvasRef,
+    generateQR,
+    downloadQR,
+    clearQR,
+    zoomIn,
+    zoomOut,
+    restoreFromStorage,
+  }
+}