From f2ce41360bf24ed7727ca2bfd74a9d107dd9f637 Mon Sep 17 00:00:00 2001 From: Smile Rex Date: Sun, 20 Jul 2025 22:49:55 +0300 Subject: [PATCH] Initial commit --- package-lock.json | 162 ++++++++++++++++++++++++++++++++++++++++ package.json | 3 + src/lib/Scropper.svelte | 63 ++++++++++++++++ src/routes/+page.svelte | 46 ++++++++++-- svelte.config.js | 3 +- vite.config.js | 11 ++- 6 files changed, 280 insertions(+), 8 deletions(-) create mode 100644 src/lib/Scropper.svelte diff --git a/package-lock.json b/package-lock.json index 96bf375..49c93f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,14 @@ "name": "imagegenerator", "version": "0.0.1", "dependencies": { + "@cloudparker/easy-script-loader-svelte": "^4.1.1", "@sveltejs/adapter-node": "^5.2.13", + "cropperjs": "^2.0.0", "dom-to-image": "^2.6.0", "html2canvas": "^1.4.1" }, "devDependencies": { + "@cloudparker/easy-cropperjs-svelte": "^2.4.0", "@sveltejs/adapter-auto": "^6.0.0", "@sveltejs/kit": "^2.22.0", "@sveltejs/vite-plugin-svelte": "^6.0.0", @@ -37,6 +40,155 @@ "node": ">=6.0.0" } }, + "node_modules/@cloudparker/easy-cropperjs-svelte": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@cloudparker/easy-cropperjs-svelte/-/easy-cropperjs-svelte-2.4.0.tgz", + "integrity": "sha512-fDMIa9ga4JXLxjpKUQwTRjSm07t2FzHxsXTsr4vzyd1ZfPO3KNEc4h+GyT4kB+rsCDgmhplRd1v+gLNg29VlIQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "svelte": "^5.0.0-next.1" + } + }, + "node_modules/@cloudparker/easy-script-loader-svelte": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@cloudparker/easy-script-loader-svelte/-/easy-script-loader-svelte-4.1.1.tgz", + "integrity": "sha512-Q+Pwcakkg+Y4vx48s//ILKxY1FPcEkcWzHdqt3tyJ+ggExTSfgxY57iilah6Ckf8PIsB6R+UxvQUPLFVoZ54Kw==", + "license": "MIT", + "dependencies": { + "@cloudparker/easy-window-watcher": "^2.0.2", + "esm-env": "^1.1.4" + }, + "peerDependencies": { + "svelte": "^5.2.0" + } + }, + "node_modules/@cloudparker/easy-window-watcher": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cloudparker/easy-window-watcher/-/easy-window-watcher-2.1.0.tgz", + "integrity": "sha512-OP1qzPhZ+3H32fcIy07heSfKhrziDa8p1mFtsGqHcO6jfEu0Vz67YY0C+J7P+qz+9C/tEJwBDJ1ghwi2Q8k9BQ==", + "license": "MIT" + }, + "node_modules/@cropper/element": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.0.0.tgz", + "integrity": "sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==", + "license": "MIT", + "dependencies": { + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/element-canvas": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.0.0.tgz", + "integrity": "sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/element-crosshair": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element-crosshair/-/element-crosshair-2.0.0.tgz", + "integrity": "sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/element-grid": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element-grid/-/element-grid-2.0.0.tgz", + "integrity": "sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/element-handle": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element-handle/-/element-handle-2.0.0.tgz", + "integrity": "sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/element-image": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element-image/-/element-image-2.0.0.tgz", + "integrity": "sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/element-canvas": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/element-selection": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element-selection/-/element-selection-2.0.0.tgz", + "integrity": "sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/element-canvas": "^2.0.0", + "@cropper/element-image": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/element-shade": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element-shade/-/element-shade-2.0.0.tgz", + "integrity": "sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/element-canvas": "^2.0.0", + "@cropper/element-selection": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/element-viewer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/element-viewer/-/element-viewer-2.0.0.tgz", + "integrity": "sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/element-canvas": "^2.0.0", + "@cropper/element-image": "^2.0.0", + "@cropper/element-selection": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, + "node_modules/@cropper/elements": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/elements/-/elements-2.0.0.tgz", + "integrity": "sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.0.0", + "@cropper/element-canvas": "^2.0.0", + "@cropper/element-crosshair": "^2.0.0", + "@cropper/element-grid": "^2.0.0", + "@cropper/element-handle": "^2.0.0", + "@cropper/element-image": "^2.0.0", + "@cropper/element-selection": "^2.0.0", + "@cropper/element-shade": "^2.0.0", + "@cropper/element-viewer": "^2.0.0" + } + }, + "node_modules/@cropper/utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@cropper/utils/-/utils-2.0.0.tgz", + "integrity": "sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==", + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.7", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.7.tgz", @@ -1368,6 +1520,16 @@ "node": ">= 0.6" } }, + "node_modules/cropperjs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.0.0.tgz", + "integrity": "sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==", + "license": "MIT", + "dependencies": { + "@cropper/elements": "^2.0.0", + "@cropper/utils": "^2.0.0" + } + }, "node_modules/css-line-break": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", diff --git a/package.json b/package.json index 26515c1..ac96916 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "prepare": "svelte-kit sync || echo ''" }, "devDependencies": { + "@cloudparker/easy-cropperjs-svelte": "^2.4.0", "@sveltejs/adapter-auto": "^6.0.0", "@sveltejs/kit": "^2.22.0", "@sveltejs/vite-plugin-svelte": "^6.0.0", @@ -21,7 +22,9 @@ "vite": "^7.0.4" }, "dependencies": { + "@cloudparker/easy-script-loader-svelte": "^4.1.1", "@sveltejs/adapter-node": "^5.2.13", + "cropperjs": "^2.0.0", "dom-to-image": "^2.6.0", "html2canvas": "^1.4.1" } diff --git a/src/lib/Scropper.svelte b/src/lib/Scropper.svelte new file mode 100644 index 0000000..2e093d7 --- /dev/null +++ b/src/lib/Scropper.svelte @@ -0,0 +1,63 @@ + + +
+
+ {#if file} + + {/if} +
+ + + +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 66c2f3f..5fd10fb 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,11 +1,13 @@
document.getElementById("fileInput").click()} + onclick={() => document.getElementById("fileInput").click()} > {#if !image} @@ -127,7 +139,7 @@ type="file" accept="image/*" class="hidden" - on:change={(e) => validateAndLoadImage(e.target.files[0])} + onchange={(e) => validateAndLoadImage(e.target.files[0])} />
@@ -145,7 +157,7 @@ class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" /> +
+ + + {/if} diff --git a/svelte.config.js b/svelte.config.js index 0e52b35..48e8aef 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -6,7 +6,8 @@ const config = { // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. // If your environment is not supported, or you settled on a specific environment, switch out the adapter. // See https://svelte.dev/docs/kit/adapters for more information about adapters. - adapter: adapter() + adapter: adapter(), + } }; diff --git a/vite.config.js b/vite.config.js index 2d35c4f..eafc513 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,5 +3,14 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; export default defineConfig({ - plugins: [tailwindcss(), sveltekit()] + plugins: [tailwindcss(), sveltekit()], + server:{ + port:5173, + strictPort:false, + }, + preview:{ + port:4000, + strictPort:false, + } + });