wip

packages/frontend/src/components/MkImageEffectorDialog.vue

@@ -94,7 +94,7 @@ const layers = reactive<ImageEffectorLayer[]>([]);
 
 watch(layers, async () => {
 	if (renderer != null) {
-		renderer.setLayers(layers);
+		renderer.setLayersAndRender(layers);
 	}
 }, { deep: true });
 
@@ -167,9 +167,7 @@ onMounted(async () => {
 		fxs: FXS,
 	});
 
-	await renderer.setLayers(layers);
+	await renderer.setLayersAndRender(layers);
-
-	renderer.render();
 
 	closeWaiting();
 });
@@ -208,11 +206,10 @@ const enabled = ref(true);
 watch(enabled, () => {
 	if (renderer != null) {
 		if (enabled.value) {
-			renderer.setLayers(layers);
+			renderer.setLayersAndRender(layers);
 		} else {
-			renderer.setLayers([]);
+			renderer.setLayersAndRender([]);
 		}
-		renderer.render();
 	}
 });
 

packages/frontend/src/components/MkImageLabelEditorDialog.vue

@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-if="props.image == null" class="_acrylic" :class="$style.previewControls">
 						<button class="_button" :class="[$style.previewControlsButton, sampleImageType === '3_2' ? $style.active : null]" @click="sampleImageType = '3_2'"><i class="ti ti-crop-landscape"></i></button>
 						<button class="_button" :class="[$style.previewControlsButton, sampleImageType === '2_3' ? $style.active : null]" @click="sampleImageType = '2_3'"><i class="ti ti-crop-portrait"></i></button>
+						<button class="_button" :class="[$style.previewControlsButton]" @click="choiceImage"><i class="ti ti-upload"></i></button>
 					</div>
 				</div>
 			</div>
@@ -164,6 +165,7 @@ const sampleImage_2_3_loading = new Promise<void>(resolve => {
 
 const sampleImageType = ref(props.image != null ? 'provided' : '3_2');
 watch(sampleImageType, async () => {
+	if (sampleImageType.value === 'provided') return;
 	if (renderer != null) {
 		renderer.destroy(false);
 		renderer = null;
@@ -171,6 +173,20 @@ watch(sampleImageType, async () => {
 	}
 });
 
+let imageFile = props.image;
+
+async function choiceImage() {
+	const files = await os.chooseFileFromPc({ multiple: false });
+	if (files.length === 0) return;
+	imageFile = files[0];
+	sampleImageType.value = 'provided';
+	if (renderer != null) {
+		renderer.destroy(false);
+		renderer = null;
+		initRenderer();
+	}
+}
+
 let renderer: ImageLabelRenderer | null = null;
 let imageBitmap: ImageBitmap | null = null;
 
@@ -191,20 +207,20 @@ async function initRenderer() {
 			exif: EXIF_MOCK,
 			renderAsPreview: true,
 		});
-	} else if (props.image != null) {
+	} else if (imageFile != null) {
-		imageBitmap = await window.createImageBitmap(props.image);
+		imageBitmap = await window.createImageBitmap(imageFile);
+
+		const exif = ExifReader.load(await imageFile.arrayBuffer());
 
 		renderer = new ImageLabelRenderer({
 			canvas: canvasEl.value,
 			image: imageBitmap,
-			exif: EXIF_MOCK,
+			exif: exif,
 			renderAsPreview: true,
 		});
 	}
 
 	await renderer!.update(frame);
-
-	renderer!.render();
 }
 
 onMounted(async () => {

packages/frontend/src/components/MkWatermarkEditorDialog.vue

@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-if="props.image == null" class="_acrylic" :class="$style.previewControls">
 						<button class="_button" :class="[$style.previewControlsButton, sampleImageType === '3_2' ? $style.active : null]" @click="sampleImageType = '3_2'"><i class="ti ti-crop-landscape"></i></button>
 						<button class="_button" :class="[$style.previewControlsButton, sampleImageType === '2_3' ? $style.active : null]" @click="sampleImageType = '2_3'"><i class="ti ti-crop-portrait"></i></button>
+						<button class="_button" :class="[$style.previewControlsButton]" @click="choiceImage"><i class="ti ti-upload"></i></button>
 					</div>
 				</div>
 			</div>
@@ -192,7 +193,7 @@ async function cancel() {
 
 watch(preset, async (newValue, oldValue) => {
 	if (renderer != null) {
-		renderer.setLayers(preset.layers);
+		renderer.setLayersAndRender(preset.layers);
 	}
 }, { deep: true });
 
@@ -212,6 +213,7 @@ const sampleImage_2_3_loading = new Promise<void>(resolve => {
 
 const sampleImageType = ref(props.image != null ? 'provided' : '3_2');
 watch(sampleImageType, async () => {
+	if (sampleImageType.value === 'provided') return;
 	if (renderer != null) {
 		renderer.destroy(false);
 		renderer = null;
@@ -219,6 +221,20 @@ watch(sampleImageType, async () => {
 	}
 });
 
+let imageFile = props.image;
+
+async function choiceImage() {
+	const files = await os.chooseFileFromPc({ multiple: false });
+	if (files.length === 0) return;
+	imageFile = files[0];
+	sampleImageType.value = 'provided';
+	if (renderer != null) {
+		renderer.destroy(false);
+		renderer = null;
+		initRenderer();
+	}
+}
+
 let renderer: WatermarkRenderer | null = null;
 let imageBitmap: ImageBitmap | null = null;
 
@@ -239,8 +255,8 @@ async function initRenderer() {
 			renderHeight: 1500,
 			image: sampleImage_2_3,
 		});
-	} else if (props.image != null) {
+	} else if (imageFile != null) {
-		imageBitmap = await window.createImageBitmap(props.image);
+		imageBitmap = await window.createImageBitmap(imageFile);
 
 		const MAX_W = 1000;
 		const MAX_H = 1000;
@@ -261,9 +277,7 @@ async function initRenderer() {
 		});
 	}
 
-	await renderer!.setLayers(preset.layers);
+	await renderer!.setLayersAndRender(preset.layers);
-
-	renderer!.render();
 }
 
 onMounted(async () => {

packages/frontend/src/composables/use-uploader.ts

@@ -558,9 +558,7 @@ export function useUploader(options: {
 				image: imageBitmap,
 			});
 
-			await renderer.setLayers(preset.layers);
+			await renderer.setLayersAndRender(preset.layers);
-
-			renderer.render();
 
 			preprocessedFile = await new Promise<Blob>((resolve) => {
 				canvas.toBlob((blob) => {

packages/frontend/src/pages/settings/drive.WatermarkItem.vue

@@ -78,9 +78,7 @@ onMounted(() => {
 				image: sampleImage,
 			});
 
-			await renderer.setLayers(props.preset.layers);
+			await renderer.setLayersAndRender(props.preset.layers);
-
-			renderer.render();
 		}, { immediate: true });
 	};
 });
@@ -94,8 +92,7 @@ onUnmounted(() => {
 
 watch(() => props.preset, async () => {
 	if (renderer != null) {
-		await renderer.setLayers(props.preset.layers);
+		await renderer.setLayersAndRender(props.preset.layers);
-		renderer.render();
 	}
 }, { deep: true });
 </script>

packages/frontend/src/utility/image-effector/ImageEffector.ts

@@ -327,7 +327,7 @@ export class ImageEffector<IEX extends ReadonlyArray<ImageEffectorFx<any, any, a
 		}
 	}
 
-	public async setLayers(layers: ImageEffectorLayer[]) {
+	public async setLayersAndRender(layers: ImageEffectorLayer[]) {
 		this.layers = layers;
 
 		const unused = new Set(this.paramTextures.keys());

packages/frontend/src/utility/image-label-renderer.ts

@@ -24,6 +24,9 @@ export type ImageLabelParams = {
 	text: string;
 	centered: boolean;
 	withQrCode: boolean;
+	bgColor: [r: number, g: number, b: number];
+	fgColor: [r: number, g: number, b: number];
+	borderRadius: number; // TODO
 };
 
 export class ImageLabelRenderer {
@@ -192,7 +195,7 @@ export class ImageLabelRenderer {
 
 		this.effector.changeResolution(renderWidth, renderHeight);
 
-		await this.effector.setLayers([{
+		await this.effector.setLayersAndRender([{
 			fxId: 'label',
 			id: 'a',
 			params: {

packages/frontend/src/utility/watermark.ts

@@ -199,10 +199,9 @@ export class WatermarkRenderer {
 		});
 	}
 
-	public async setLayers(layers: WatermarkPreset['layers']) {
+	public async setLayersAndRender(layers: WatermarkPreset['layers']) {
 		this.layers = layers;
-		await this.effector.setLayers(this.makeImageEffectorLayers());
+		await this.effector.setLayersAndRender(this.makeImageEffectorLayers());
-		this.render();
 	}
 
 	public render(): void {