pr5 - master - ViliaIbatullina/HTML

pr5
115 строк3 KB
ViliaIbatullina
practice_5
19 апр 2025, 09:54
19 апр 2025, 09:542c0abc7
Шаг 2. Создание нового Vue приложения
для создания нового проекта с помощью Vue CLI:

npm create vue@latest my-vue-app
Выберите настройки проекта, включая поддержку Vue 3, TypeScript и Router.

Шаг 3. Установка зависимостей и запуск проекта


cd my-vue-app
npm install
npm run dev
Шаг 4. Добавление обработки CORS запросов


from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
Шаг 5. Добавление компонента распознавания изображения


<template>
  <div>
    <h1 v-if="resultVisible">Ваше число: <span>{{ variant }}</span></h1>
    <div>
      <canvas
        ref="canvas"
        width="320"
        height="320"
        @mousedown="startDrawing"
        @mouseup="stopDrawing"
        @mousemove="draw"
      ></canvas>
    </div>
    <div>
      <button @click="resetCanvas">Сброс</button>
      <button @click="recognizeImage">Распознать</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'ImageRecognizer',
  setup() {
    const resultVisible = ref(false);
    const variant = ref(0);
    const drawing = ref(false);
    const lastX = ref(0);
    const lastY = ref(0);
    const canvas = ref<HTMLCanvasElement | null>(null);
    let ctx: CanvasRenderingContext2D | null = null;

    onMounted(() => {
      if (canvas.value) {
        ctx = canvas.value.getContext("2d");
      }
    });

    const getMousePos = (event: MouseEvent): [number, number] => {
      if (!canvas.value) return [0, 0];
      const rect = canvas.value.getBoundingClientRect();
      return [
        event.clientX - rect.left,
        event.clientY - rect.top
      ];
    };

    const startDrawing = (event: MouseEvent) => {
      drawing.value = true;
      const [x, y] = getMousePos(event);
      lastX.value = x;
      lastY.value = y;
    };

    const stopDrawing = () => {
      drawing.value = false;
    };

    const draw = (event: MouseEvent) => {
      if (!drawing.value || !ctx) return;
      const [x, y] = getMousePos(event);
      ctx.strokeStyle = "black";
      ctx.lineWidth = 16;
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(lastX.value, lastY.value);
      ctx.lineTo(x, y);
      ctx.stroke();
      lastX.value = x;
      lastY.value = y;
    };

    const resetCanvas = () => {
      if (canvas.value && ctx) {
        ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
      }
      resultVisible.value = false;
    };

    const processJson = (data: any) => {
      if (data.status !== "ok") {
        resultVisible.value = false;
        return;
      }
      variant.value = data.variant;
      resultVisible.value