64 lines
2.3 KiB
Svelte
64 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import EasyCropperjs from "@cloudparker/easy-cropperjs-svelte";
|
|
|
|
let easyCropperjsRef: EasyCropperjs | null = $state(null);
|
|
let file: File = $props();
|
|
|
|
// Функция для обработки обрезанного изображения
|
|
async function handleCrop() {
|
|
const data = await easyCropperjsRef?.crop({
|
|
outputWidth: 512, // Ширина обрезанного изображения
|
|
outputFormat: "png", // Формат обрезанного изображения
|
|
outputQuality: 0.6, // Качество
|
|
outputType: "file", // Тип данных
|
|
});
|
|
|
|
// Если данные обрезки получены и это Blob
|
|
if (data instanceof Blob) {
|
|
const downloadLink = document.createElement("a"); // Создаем элемент <a> для скачивания
|
|
downloadLink.href = URL.createObjectURL(data); // Создаем URL для обрезанного изображения
|
|
downloadLink.download = "cropped_image.png"; // Имя файла для скачивания
|
|
downloadLink.click(); // Имитируем клик для скачивания
|
|
} else {
|
|
console.log("Нет данных для скачивания");
|
|
}
|
|
}
|
|
|
|
// Получение результата обрезки
|
|
function handleCropResult(ev: CustomEvent) {
|
|
let base64ImageUrl: string = ev.detail;
|
|
// Используйте base64ImageUrl по вашему усмотрению
|
|
}
|
|
|
|
// Функция для получения файла
|
|
async function getFile(url: string) {
|
|
const fileName = url.split("/").pop() || "file.png";
|
|
const blob = await (await fetch(url)).blob();
|
|
const file = new File([blob], fileName, { type: blob.type });
|
|
return file;
|
|
}
|
|
</script>
|
|
|
|
<div class="p-4">
|
|
<div
|
|
class="w-[512px] h-[512px] overflow-hidden relative border-2 border-gray-300"
|
|
>
|
|
{#if file}
|
|
<EasyCropperjs
|
|
bind:this={easyCropperjsRef}
|
|
outputAspectRatio={1}
|
|
inputImageFile={file}
|
|
onCrop={handleCropResult}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Кнопка для обрезки изображения -->
|
|
<button
|
|
onclick={handleCrop}
|
|
class="mt-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-700"
|
|
>
|
|
Crop
|
|
</button>
|
|
</div>
|