enhance(frontend): add pixelate mask effect

1 files changed, 19 insertions, 1 deletions

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index 96fb01bb8c..5ce514f93e 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -216,7 +216,7 @@ watch(enabled, () => {
 	}
 });
 
-const penMode = ref<'fill' | 'blur' | null>(null);
+const penMode = ref<'fill' | 'blur' | 'pixelate' | null>(null);
 
 function showPenMenu(ev: MouseEvent) {
 	os.popupMenu([{
@@ -229,6 +229,11 @@ function showPenMenu(ev: MouseEvent) {
 		action: () => {
 			penMode.value = 'blur';
 		},
+	}, {
+		text: i18n.ts._imageEffector._fxs.pixelate,
+		action: () => {
+			penMode.value = 'pixelate';
+		},
 	}], ev.currentTarget ?? ev.target);
 }
 
@@ -291,6 +296,19 @@ function onImagePointerdown(ev: PointerEvent) {
 				radius: 3,
 			},
 		});
+	} else if (penMode.value === 'pixelate') {
+		layers.push({
+			id,
+			fxId: 'pixelate',
+			params: {
+				offsetX: 0,
+				offsetY: 0,
+				scaleX: 0.1,
+				scaleY: 0.1,
+				angle: 0,
+				strength: 0.2,
+			},
+		});
 	}
 
 	_move(ev.offsetX, ev.offsetY);