アップロード前に画像縮小・圧縮・切抜きしたい

<script setup lang="ts">
import Compressor from "compressorjs";
import { computed } from "vue";
import { ref } from "vue";
import 'cropperjs/dist/cropper.css';
import SimpleCropper from '@/Components/SimpleCropper.vue';

// 画像選択時に圧縮した画像のデータURL
const compressed = ref<string>(null);
// アップロードするバイナリデータ
const image = ref<Blob>(null);
// プレビュー用のデータURL
const preview = computed<string>(() => image.value ? URL.createObjectURL(image.value) : null);

// 画像選択時の処理
function onChange(e: Event) {
    const target = e.target as HTMLInputElement;
    const file = target.files.item(0);

    // input[type=file]の選択された画像を解除
    target.value = '';

    // 画像ファイルが選択されていなければ何もしない
    if (!file) {
        compressed.value = null;
        return;
    }

    // 画像選択時に縦横1000pxに収まるサイズに画像を縮小する
    new Compressor(file, {
        maxWidth: 1000,
        maxHeight: 1000,
        success(result) {
            compressed.value = URL.createObjectURL(result);
        },
        error(err) {
            console.log(err.message);
        },
    });
}

// 画像切り抜き確定後の処理
function onCropped(canvas: HTMLCanvasElement) {
    // 切り抜き前画像をクリア
    compressed.value = null;

    // キャンバスデータをBlobに変換
    canvas.toBlob((blob) => {
        // 画像を圧縮
        new Compressor(blob, {
            convertSize: 200000, // 200KBを超えた場合JPEGに変換する
            success(result) {
                // アップロードするデータにセット
                image.value = result;
            },
        });
    });
}

// 画像アップロード処理
function submit() {
    const formData = new FormData();
    formData.append('image', image.value);
    fetch('/receive', {
        body: formData,
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        }
    }).then(res => {
        alert('画像のアップロードが完了しました');
        image.value = null;
    });
}
</script>

<template>
    <h1 class="h1">画像圧縮してからアップロード</h1>
    <div class="my-4">
        <input type="file" name="image" id="image" @change="onChange">
    </div>
    <div v-if="compressed" class="my-4">
        <SimpleCropper :image="compressed" @cropped="onCropped" />
    </div>
    <div v-if="preview" class="my-4">
        <div>
            <img :src="preview" alt="" class="preview">
        </div>
        <div class="space-x-4">
            <button type="button" @click="submit" class="btn">送信</button>
            <button type="button" @click="image = null" class="btn">リセット</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Cropper from 'cropperjs';
import { onMounted } from 'vue';
import { ref } from 'vue';

defineProps<{
    image: string; // 画像URL
}>();

const emit = defineEmits<{
    (e: 'cropped', data: HTMLCanvasElement): void; // 切抜き確定イベントを定義
}>();

// Cropper.jsに渡すimg要素
const imgElement = ref<HTMLImageElement>();
// Cropper.jsのインスタンス
const cropper = ref<Cropper>(null);
// 切抜き時のプレビュー用要素
const preview = ref<HTMLElement>();

// 切抜き確定処理
function onFinish(e: Event) {
    e.preventDefault();
    // canvas要素を取得
    const canvas = cropper.value.getCroppedCanvas();
    // croppedイベントを発火 canvas要素を親コンポーネントに渡す
    emit('cropped', canvas);
}

// DOM要素を扱うためマウント後に実行
onMounted(() => {
    cropper.value = new Cropper(imgElement.value, {
        viewMode: 3,
        preview: preview.value,
    });
});
</script>

<template>
    <div>
        <div>
            <img ref="imgElement" :src="image" alt="" />
        </div>
        <div ref="preview" class="w-48 h-48 overflow-hidden"/>
        <div>
            <button type="button" @click="onFinish" class="btn">確定</button>
        </div>
    </div>
</template>