tokimeki-image-editor 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AdjustTool.svelte +333 -299
- package/dist/components/Canvas.svelte +274 -115
- package/dist/components/Canvas.svelte.d.ts +1 -0
- package/dist/components/FilterTool.svelte +408 -298
- package/dist/components/ImageEditor.svelte +426 -423
- package/dist/i18n/locales/en.json +79 -68
- package/dist/i18n/locales/ja.json +79 -68
- package/dist/shaders/blur.wgsl +59 -0
- package/dist/shaders/composite.wgsl +46 -0
- package/dist/shaders/grain.wgsl +225 -0
- package/dist/shaders/image-editor.wgsl +296 -0
- package/dist/types.d.ts +3 -1
- package/dist/utils/adjustments.d.ts +2 -1
- package/dist/utils/adjustments.js +100 -13
- package/dist/utils/canvas.d.ts +7 -2
- package/dist/utils/canvas.js +48 -5
- package/dist/utils/filters.js +109 -2
- package/dist/utils/webgpu-render.d.ts +26 -0
- package/dist/utils/webgpu-render.js +1192 -0
- package/package.json +43 -42
package/dist/utils/filters.js
CHANGED
|
@@ -57,7 +57,7 @@ export const FILTER_PRESETS = [
|
|
|
57
57
|
saturation: 15,
|
|
58
58
|
brightness: 5,
|
|
59
59
|
exposure: 10,
|
|
60
|
-
|
|
60
|
+
temperature: 60,
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
63
|
{
|
|
@@ -67,7 +67,7 @@ export const FILTER_PRESETS = [
|
|
|
67
67
|
saturation: 10,
|
|
68
68
|
brightness: -5,
|
|
69
69
|
contrast: 10,
|
|
70
|
-
|
|
70
|
+
temperature: -60,
|
|
71
71
|
}
|
|
72
72
|
},
|
|
73
73
|
{
|
|
@@ -80,6 +80,113 @@ export const FILTER_PRESETS = [
|
|
|
80
80
|
saturation: 2,
|
|
81
81
|
vignette: -24,
|
|
82
82
|
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
id: 'cinematic',
|
|
86
|
+
name: 'Cinematic',
|
|
87
|
+
adjustments: {
|
|
88
|
+
contrast: 30,
|
|
89
|
+
highlights: -25,
|
|
90
|
+
shadows: 40,
|
|
91
|
+
saturation: -15,
|
|
92
|
+
temperature: -10,
|
|
93
|
+
vignette: -35,
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
id: 'dramatic',
|
|
98
|
+
name: 'Dramatic',
|
|
99
|
+
adjustments: {
|
|
100
|
+
contrast: 70,
|
|
101
|
+
highlights: -60,
|
|
102
|
+
shadows: -80,
|
|
103
|
+
saturation: 25,
|
|
104
|
+
brightness: -10,
|
|
105
|
+
vignette: -50,
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
id: 'faded',
|
|
110
|
+
name: 'Faded',
|
|
111
|
+
adjustments: {
|
|
112
|
+
contrast: -40,
|
|
113
|
+
highlights: 30,
|
|
114
|
+
shadows: 60,
|
|
115
|
+
saturation: -25,
|
|
116
|
+
brightness: 10,
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
id: 'golden',
|
|
121
|
+
name: 'Golden Hour',
|
|
122
|
+
adjustments: {
|
|
123
|
+
temperature: 50,
|
|
124
|
+
highlights: 20,
|
|
125
|
+
shadows: -15,
|
|
126
|
+
saturation: 20,
|
|
127
|
+
brightness: 10,
|
|
128
|
+
contrast: 15,
|
|
129
|
+
vignette: -20,
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
id: 'soft',
|
|
134
|
+
name: 'Soft',
|
|
135
|
+
adjustments: {
|
|
136
|
+
contrast: -25,
|
|
137
|
+
highlights: 15,
|
|
138
|
+
shadows: 35,
|
|
139
|
+
saturation: -10,
|
|
140
|
+
brightness: 8,
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
id: 'moody',
|
|
145
|
+
name: 'Moody',
|
|
146
|
+
adjustments: {
|
|
147
|
+
contrast: 45,
|
|
148
|
+
highlights: 25,
|
|
149
|
+
shadows: -60,
|
|
150
|
+
saturation: -5,
|
|
151
|
+
brightness: -20,
|
|
152
|
+
temperature: -15,
|
|
153
|
+
vignette: -40,
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
id: 'pastel',
|
|
158
|
+
name: 'Pastel',
|
|
159
|
+
adjustments: {
|
|
160
|
+
contrast: -30,
|
|
161
|
+
highlights: 40,
|
|
162
|
+
shadows: 50,
|
|
163
|
+
saturation: 30,
|
|
164
|
+
brightness: 15,
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
id: 'bleach',
|
|
169
|
+
name: 'Bleach Bypass',
|
|
170
|
+
adjustments: {
|
|
171
|
+
contrast: 60,
|
|
172
|
+
saturation: -40,
|
|
173
|
+
highlights: 15,
|
|
174
|
+
shadows: -20,
|
|
175
|
+
brightness: 10,
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
id: 'grainy',
|
|
180
|
+
name: 'Grainy',
|
|
181
|
+
adjustments: {
|
|
182
|
+
grain: 98,
|
|
183
|
+
contrast: 22,
|
|
184
|
+
saturation: -10,
|
|
185
|
+
vignette: -20,
|
|
186
|
+
shadows: 48,
|
|
187
|
+
highlights: 10,
|
|
188
|
+
blur: 8,
|
|
189
|
+
}
|
|
83
190
|
}
|
|
84
191
|
];
|
|
85
192
|
/**
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { AdjustmentsState, Viewport, TransformState, CropArea, BlurArea } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Initialize WebGPU for the given canvas
|
|
4
|
+
*/
|
|
5
|
+
export declare function initWebGPUCanvas(canvas: HTMLCanvasElement): Promise<boolean>;
|
|
6
|
+
/**
|
|
7
|
+
* Upload image to GPU as texture
|
|
8
|
+
*/
|
|
9
|
+
export declare function uploadImageToGPU(imageSource: HTMLImageElement | ImageBitmap): Promise<boolean>;
|
|
10
|
+
/**
|
|
11
|
+
* Render with adjustments, viewport, transform, crop, and blur areas
|
|
12
|
+
*/
|
|
13
|
+
export declare function renderWithAdjustments(adjustments: AdjustmentsState, viewport: Viewport, transform: TransformState, canvasWidth: number, canvasHeight: number, imageWidth: number, imageHeight: number, cropArea?: CropArea | null, blurAreas?: BlurArea[]): boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Check if WebGPU is initialized for canvas
|
|
16
|
+
*/
|
|
17
|
+
export declare function isWebGPUInitialized(): boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Export image using WebGPU rendering at full resolution
|
|
20
|
+
* Creates an offscreen canvas and renders the final image with all adjustments
|
|
21
|
+
*/
|
|
22
|
+
export declare function exportWithWebGPU(imageSource: HTMLImageElement | ImageBitmap, adjustments: AdjustmentsState, transform: TransformState, cropArea?: CropArea | null, blurAreas?: BlurArea[]): Promise<HTMLCanvasElement | null>;
|
|
23
|
+
/**
|
|
24
|
+
* Cleanup WebGPU resources
|
|
25
|
+
*/
|
|
26
|
+
export declare function cleanupWebGPU(): void;
|