image gradient
This commit is contained in:
276
src/routes/test/+page.svelte
Normal file
276
src/routes/test/+page.svelte
Normal file
@@ -0,0 +1,276 @@
|
||||
<script lang="ts">
|
||||
import domtoimage from "dom-to-image";
|
||||
import Cropper, { type OnCropCompleteEvent } from "svelte-easy-crop";
|
||||
|
||||
let crop = { x: 0, y: 0 };
|
||||
let zoom = 1;
|
||||
let cropSize = { width: 512, height: 512 };
|
||||
let maxZoom = 10;
|
||||
let minZoom = 1;
|
||||
let restrictPosition = true;
|
||||
let showGrid = false;
|
||||
let croppedImage = null;
|
||||
|
||||
let image: string;
|
||||
let incorrectImage: string;
|
||||
let text: string = "";
|
||||
let error: string = "";
|
||||
let isDragging: boolean = false;
|
||||
let isModalOpen: boolean = false;
|
||||
let fontSize: number = 2.5;
|
||||
|
||||
async function validateAndLoadImage(file: File): Promise<void> {
|
||||
error = "";
|
||||
const img = new Image();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (e: ProgressEvent<FileReader>) => {
|
||||
img.src = e.target?.result as string;
|
||||
img.onload = () => {
|
||||
if (img.width === 512 && img.height === 512) {
|
||||
image = e.target?.result as string;
|
||||
} else {
|
||||
incorrectImage = e.target?.result as string;
|
||||
isModalOpen = true;
|
||||
}
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function handleDrop(e: DragEvent): void {
|
||||
e.preventDefault();
|
||||
isDragging = false;
|
||||
const file = (e.dataTransfer as DataTransfer).files[0];
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
validateAndLoadImage(file);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragOver(e: DragEvent): void {
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
}
|
||||
|
||||
function handleDragLeave(): void {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
async function saveImage(): Promise<void> {
|
||||
if (!image) return;
|
||||
|
||||
let node = document.getElementById("result");
|
||||
|
||||
if (node) {
|
||||
domtoimage
|
||||
.toPng(node, {
|
||||
style: {
|
||||
border: "none",
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
outline: "none",
|
||||
},
|
||||
})
|
||||
.then((dataUrl: string) => {
|
||||
var link = document.createElement("a");
|
||||
link.download = "avatar.png";
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function cropImage(x: number, y: number, width: number, height: number) {
|
||||
const img = new Image();
|
||||
img.src = incorrectImage;
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = 512;
|
||||
canvas.height = 512;
|
||||
|
||||
ctx.drawImage(img, x, y, width, height, 0, 0, 512, 512);
|
||||
|
||||
croppedImage = canvas.toDataURL("image/png");
|
||||
};
|
||||
}
|
||||
|
||||
const handleCropComplete = (event: OnCropCompleteEvent) => {
|
||||
const { x, y, width, height } = event.pixels;
|
||||
cropImage(x, y, width, height);
|
||||
};
|
||||
|
||||
function saveToMainImage() {
|
||||
image = croppedImage;
|
||||
isModalOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if isModalOpen}
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<div class="flex flex-col">
|
||||
<div class="h-[700px] w-[700px] relative rounded-2xl">
|
||||
<Cropper
|
||||
image={incorrectImage}
|
||||
{cropSize}
|
||||
{maxZoom}
|
||||
{minZoom}
|
||||
{restrictPosition}
|
||||
{showGrid}
|
||||
bind:crop
|
||||
bind:zoom
|
||||
oncropcomplete={handleCropComplete}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onclick={saveToMainImage}
|
||||
class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed mt-3"
|
||||
>
|
||||
Обрезать
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||||
<div
|
||||
class="preview-container relative bg-gray-50 mb-4 overflow-hidden border-2 transition-colors h-[512px] w-[512px] rounded-full"
|
||||
ondrop={handleDrop}
|
||||
ondragover={handleDragOver}
|
||||
ondragleave={handleDragLeave}
|
||||
style="cursor: pointer"
|
||||
onclick={() => document.getElementById("fileInput").click()}
|
||||
>
|
||||
<!-- Состояние без изображения -->
|
||||
{#if !image}
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col items-center justify-center cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
class="w-16 h-16 text-gray-400 mb-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
<p class="text-lg text-gray-500">Перетащите изображение</p>
|
||||
<p class="text-sm text-gray-400 mt-1">или кликните для выбора</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Загруженное изображение -->
|
||||
{#if image}
|
||||
<div id="result" class="w-full h-full">
|
||||
<svg viewBox="0 0 512 512" class="w-full h-full" style="--font-size: {fontSize}rem">
|
||||
<defs>
|
||||
<clipPath id="circle-clip">
|
||||
<circle cx="256" cy="256" r="256" />
|
||||
</clipPath>
|
||||
|
||||
<pattern id="imagePattern" patternUnits="userSpaceOnUse" width="512" height="512" >
|
||||
<image href="/src/routes/test/image.png" width="512" height="512"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<image href={image} width="512" height="512" clip-path="url(#circle-clip)" />
|
||||
<!-- Текст -->
|
||||
{#if text}
|
||||
<path
|
||||
id="text-path"
|
||||
d="M 256,26 a 230,230 0 0,0 0,460 a 230,230 0 0,0 0,-460"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
<text class="circle-text-bg">
|
||||
<textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
|
||||
</text>
|
||||
|
||||
<text class="circle-text">
|
||||
<textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
|
||||
</text>
|
||||
{/if}
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
onchange={(e) =>
|
||||
validateAndLoadImage((e.target as HTMLInputElement).files[0])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<p class="text-red-500 text-sm mb-4 text-center">{error}</p>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={text}
|
||||
placeholder="Должность"
|
||||
class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
onclick={saveImage}
|
||||
class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Сохранить 512×512
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<label for="font-size-slider" class="text-sm text-gray-600 whitespace-nowrap"
|
||||
>Размер текста:</label
|
||||
>
|
||||
<input
|
||||
id="font-size-slider"
|
||||
type="range"
|
||||
min="1.5"
|
||||
max="7"
|
||||
step="0.1"
|
||||
bind:value={fontSize}
|
||||
class="w-full"
|
||||
/>
|
||||
<div class="min-w-[25px] min-h-[25px]">{fontSize}</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 text-center">
|
||||
Размер изображения 512×512 пикселей
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.circle-text-bg {
|
||||
fill: none;
|
||||
stroke: rgb(0, 0, 0, 0.7);
|
||||
stroke-width: 5px;
|
||||
stroke-linejoin:round;
|
||||
stroke-linecap:round;
|
||||
paint-order: stroke;
|
||||
font-size: var(--font-size);
|
||||
font-weight: 700;
|
||||
letter-spacing: 6px;
|
||||
}
|
||||
|
||||
.circle-text {
|
||||
fill: url(#imagePattern);
|
||||
stroke: #000;
|
||||
stroke-width: 1.5px;
|
||||
paint-order: stroke;
|
||||
letter-spacing: 6px;
|
||||
font-size: var(--font-size);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
</style>
|
||||
BIN
src/routes/test/image.png
Normal file
BIN
src/routes/test/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 457 KiB |
30
src/routes/test2/+page.svelte
Normal file
30
src/routes/test2/+page.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
var text: String = $state()
|
||||
</script>
|
||||
|
||||
<svg width="400" height="200">
|
||||
<defs>
|
||||
<pattern id="imagePattern" patternUnits="userSpaceOnUse" width="100" height="100" >
|
||||
<image href="/src/routes/test/image.png" width="100" height="100"/>
|
||||
</pattern>
|
||||
|
||||
<!-- Определяем путь для текста -->
|
||||
<path id="textPath" d="M 256,26 a 230,230 0 0,0 0,460 a 230,230 0 0,0 0,-460" fill="none"/>
|
||||
</defs>
|
||||
|
||||
<!-- Отображаем путь (опционально, для визуализации) -->
|
||||
<path d="M50,100 Q150,50 250,100 T450,100"
|
||||
fill="none"
|
||||
stroke="lightgray"
|
||||
stroke-width="1"
|
||||
stroke-dasharray="5,5"/>
|
||||
|
||||
<!-- Текст по пути -->
|
||||
<text font-family="Arial" font-size="16" fill="url(#imagePattern)">
|
||||
<textPath href="#textPath" startOffset="0%">
|
||||
{text}
|
||||
</textPath>
|
||||
</text>
|
||||
</svg>
|
||||
|
||||
<input type="text" bind:value={text}>
|
||||
Reference in New Issue
Block a user