feat(frontend): EXIFフレーム機能 (#16725)

* wip * wip * Update ImageEffector.ts * Update image-label-renderer.ts * Update image-label-renderer.ts * wip * Update image-label-renderer.ts * wip * wip * wip * wip * wip * wip * wip * Update use-uploader.ts * Update watermark.ts * wip * wu * wip * Update image-frame-renderer.ts * wip * wip * Update image-frame-renderer.ts * Create ImageCompositor.ts * Update ImageCompositor.ts * wip * wip * Update ImageEffector.ts * wip * Update use-uploader.ts * wip * wip * wip * wip * Update fxs.ts * wip * wip * wip * Update CHANGELOG.md * wip * wip * Update MkImageEffectorDialog.vue * Update MkImageEffectorDialog.vue * Update MkImageFrameEditorDialog.vue * Update use-uploader.ts * improve error handling * Update use-uploader.ts * 🎨 * wip * wip * lazy load * lazy load * wip * wip * wip
2026-05-27 02:34:11 +02:00 · 2025-11-06 20:25:17 +09:00
parent 26c8914a26
commit 4ba18690d7
64 changed files with 2838 additions and 1186 deletions
--- a/packages/frontend/src/utility/image-compositor-functions/blockNoise.ts
+++ b/packages/frontend/src/utility/image-compositor-functions/blockNoise.ts
@@ -0,0 +1,95 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import seedrandom from 'seedrandom';
+import shader from './blockNoise.glsl';
+import type { ImageEffectorUiDefinition } from '../image-effector/ImageEffector.js';
+import { defineImageCompositorFunction } from '@/lib/ImageCompositor.js';
+import { i18n } from '@/i18n.js';
+
+export const fn = defineImageCompositorFunction<{
+	amount: number;
+	strength: number;
+	width: number;
+	height: number;
+	channelShift: number;
+	seed: number;
+}>({
+	shader,
+	main: ({ gl, program, u, params }) => {
+		gl.uniform1i(u.amount, params.amount);
+		gl.uniform1f(u.channelShift, params.channelShift);
+
+		const margin = 0;
+
+		const rnd = seedrandom(params.seed.toString());
+
+		for (let i = 0; i < params.amount; i++) {
+			const o = gl.getUniformLocation(program, `u_shiftOrigins[${i.toString()}]`);
+			gl.uniform2f(o, (rnd() * (1 + (margin * 2))) - margin, (rnd() * (1 + (margin * 2))) - margin);
+
+			const s = gl.getUniformLocation(program, `u_shiftStrengths[${i.toString()}]`);
+			gl.uniform1f(s, (1 - (rnd() * 2)) * params.strength);
+
+			const sizes = gl.getUniformLocation(program, `u_shiftSizes[${i.toString()}]`);
+			gl.uniform2f(sizes, params.width, params.height);
+		}
+	},
+});
+
+export const uiDefinition = {
+	name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.blockNoise,
+	params: {
+		amount: {
+			label: i18n.ts._imageEffector._fxProps.amount,
+			type: 'number',
+			default: 50,
+			min: 1,
+			max: 100,
+			step: 1,
+		},
+		strength: {
+			label: i18n.ts._imageEffector._fxProps.strength,
+			type: 'number',
+			default: 0.05,
+			min: -1,
+			max: 1,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
+		},
+		width: {
+			label: i18n.ts.width,
+			type: 'number',
+			default: 0.05,
+			min: 0.01,
+			max: 1,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
+		},
+		height: {
+			label: i18n.ts.height,
+			type: 'number',
+			default: 0.01,
+			min: 0.01,
+			max: 1,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
+		},
+		channelShift: {
+			label: i18n.ts._imageEffector._fxProps.glitchChannelShift,
+			type: 'number',
+			default: 0,
+			min: 0,
+			max: 10,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
+		},
+		seed: {
+			label: i18n.ts._imageEffector._fxProps.seed,
+			type: 'seed',
+			default: 100,
+		},
+	},
+} satisfies ImageEffectorUiDefinition<typeof fn>;