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

1 files changed, 61 insertions, 0 deletions

diff --git a/packages/frontend/src/utility/image-frame-renderer/frame.glsl b/packages/frontend/src/utility/image-frame-renderer/frame.glsl
new file mode 100644
index 0000000000..aa9dde5ad8
--- /dev/null
+++ b/packages/frontend/src/utility/image-frame-renderer/frame.glsl
@@ -0,0 +1,61 @@
+#version 300 es
+precision mediump float;
+
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+in vec2 in_uv;
+uniform sampler2D in_texture;
+uniform vec2 in_resolution;
+uniform sampler2D u_image;
+uniform sampler2D u_topLabel;
+uniform sampler2D u_bottomLabel;
+uniform bool u_topLabelEnabled;
+uniform bool u_bottomLabelEnabled;
+uniform float u_paddingTop;
+uniform float u_paddingBottom;
+uniform float u_paddingLeft;
+uniform float u_paddingRight;
+uniform vec3 u_bg;
+out vec4 out_color;
+
+float remap(float value, float inputMin, float inputMax, float outputMin, float outputMax) {
+	return outputMin + (outputMax - outputMin) * ((value - inputMin) / (inputMax - inputMin));
+}
+
+vec3 blendAlpha(vec3 bg, vec4 fg) {
+	return fg.a * fg.rgb + (1.0 - fg.a) * bg;
+}
+
+void main() {
+	vec4 bg = vec4(u_bg, 1.0);
+
+	vec4 image_color = texture(u_image, vec2(
+		remap(in_uv.x, u_paddingLeft, 1.0 - u_paddingRight, 0.0, 1.0),
+		remap(in_uv.y, u_paddingTop, 1.0 - u_paddingBottom, 0.0, 1.0)
+	));
+
+	vec4 topLabel_color = u_topLabelEnabled ? texture(u_topLabel, vec2(
+		in_uv.x,
+		remap(in_uv.y, 0.0, u_paddingTop, 0.0, 1.0)
+	)) : bg;
+
+	vec4 bottomLabel_color = u_bottomLabelEnabled ? texture(u_bottomLabel, vec2(
+		in_uv.x,
+		remap(in_uv.y, 1.0 - u_paddingBottom, 1.0, 0.0, 1.0)
+	)) : bg;
+
+	if (in_uv.y < u_paddingTop) {
+		out_color = vec4(blendAlpha(bg.rgb, topLabel_color), 1.0);
+	} else if (in_uv.y > (1.0 - u_paddingBottom)) {
+		out_color = vec4(blendAlpha(bg.rgb, bottomLabel_color), 1.0);
+	} else {
+		if (in_uv.y > u_paddingTop && in_uv.x > u_paddingLeft && in_uv.x < (1.0 - u_paddingRight)) {
+			out_color = image_color;
+		} else {
+			out_color = bg;
+		}
+	}
+}