-
- {{ i18n.ts._watermarkEditor.type }}
-
-
-
-
-
+
(deepClone(props.preset) ?? {
id: genId(),
name: '',
- layers: [createTextLayer()],
+ layers: [],
});
const emit = defineEmits<{
@@ -187,28 +188,6 @@ async function cancel() {
dialog.value?.close();
}
-const {
- model: type,
- def: typeDef,
-} = useMkSelect({
- items: [
- { label: i18n.ts._watermarkEditor.text, value: 'text' },
- { label: i18n.ts._watermarkEditor.image, value: 'image' },
- { label: i18n.ts._watermarkEditor.advanced, value: 'advanced' },
- ],
- initialValue: preset.layers.length > 1 ? 'advanced' : preset.layers[0].type,
-});
-
-watch(type, () => {
- if (type.value === 'text') {
- preset.layers = [createTextLayer()];
- } else if (type.value === 'image') {
- preset.layers = [createImageLayer()];
- } else if (type.value === 'advanced') {
- // nop
- }
-});
-
watch(preset, async (newValue, oldValue) => {
if (renderer != null) {
renderer.setLayers(preset.layers);
@@ -338,6 +317,11 @@ function addLayer(ev: MouseEvent) {
action: () => {
preset.layers.push(createImageLayer());
},
+ }, {
+ text: i18n.ts._watermarkEditor.qr,
+ action: () => {
+ preset.layers.push(createQrLayer());
+ },
}, {
text: i18n.ts._watermarkEditor.stripe,
action: () => {
diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts
index aec1c7ae4c..a162b3aa9e 100644
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@@ -66,6 +66,12 @@ export const navbarItemDef = reactive({
lookup();
},
},
+ qr: {
+ title: i18n.ts.qr,
+ icon: 'ti ti-qrcode',
+ show: computed(() => $i != null),
+ to: '/qr',
+ },
lists: {
title: i18n.ts.lists,
icon: 'ti ti-list',
diff --git a/packages/frontend/src/pages/chat/home.vue b/packages/frontend/src/pages/chat/home.vue
index 2af0e0b443..5c773a241b 100644
--- a/packages/frontend/src/pages/chat/home.vue
+++ b/packages/frontend/src/pages/chat/home.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+ {{ data.split('\n')[0] }}
+
+
+
+
+
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
new file mode 100644
index 0000000000..e4c475196a
--- /dev/null
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -0,0 +1,397 @@
+
+
+
+
{{ i18n.ts.uploadFolder }}
{{ uploadFolder ? uploadFolder.name : '-' }}
-
+
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 17e8505474..89325dee63 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -151,6 +151,15 @@ SPDX-License-Identifier: AGPL-3.0-only
+
+
+ +
+
+
+ {{ i18n.ts.qr }}
+
+
@@ -164,6 +173,7 @@ import MkSelect from '@/components/MkSelect.vue';
import FormSplit from '@/components/form/split.vue';
import MkFolder from '@/components/MkFolder.vue';
import FormSlot from '@/components/form/slot.vue';
+import FormLink from '@/components/form/link.vue';
import { chooseDriveFile } from '@/utility/drive.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
diff --git a/packages/frontend/src/router.definition.ts b/packages/frontend/src/router.definition.ts
index e25e0fe161..d59c9d1c6f 100644
--- a/packages/frontend/src/router.definition.ts
+++ b/packages/frontend/src/router.definition.ts
@@ -590,6 +590,10 @@ export const ROUTE_DEF = [{
path: '/reversi/g/:gameId',
component: page(() => import('@/pages/reversi/game.vue')),
loginRequired: false,
+}, {
+ path: '/qr',
+ component: page(() => import('@/pages/qr.vue')),
+ loginRequired: true,
}, {
path: '/debug',
component: page(() => import('@/pages/debug.vue')),
diff --git a/packages/frontend/src/utility/get-user-menu.ts b/packages/frontend/src/utility/get-user-menu.ts
index 1ec322b5fd..fc1e9f209e 100644
--- a/packages/frontend/src/utility/get-user-menu.ts
+++ b/packages/frontend/src/utility/get-user-menu.ts
@@ -215,6 +215,16 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
});
}
+ if ($i && meId === user.id) {
+ menuItems.push({
+ icon: 'ti ti-qrcode',
+ text: i18n.ts.qr,
+ action: () => {
+ router.push('/qr');
+ },
+ });
+ }
+
if (notesSearchAvailable && (user.host == null || canSearchNonLocalNotes)) {
menuItems.push({
icon: 'ti ti-search',
diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts
index 66b4d1026c..26c74bfae5 100644
--- a/packages/frontend/src/utility/image-effector/ImageEffector.ts
+++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts
@@ -3,8 +3,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
+import QRCodeStyling from 'qr-code-styling';
+import { url, host } from '@@/js/config.js';
import { getProxiedImageUrl } from '../media-proxy.js';
import { initShaderProgram } from '../webgl.js';
+import { ensureSignin } from '@/i.js';
export type ImageEffectorRGB = [r: number, g: number, b: number];
@@ -48,6 +51,7 @@ interface AlignParamDef extends CommonParamDef {
default: {
x: 'left' | 'center' | 'right';
y: 'top' | 'center' | 'bottom';
+ margin?: number;
};
};
@@ -58,7 +62,13 @@ interface SeedParamDef extends CommonParamDef {
interface TextureParamDef extends CommonParamDef {
type: 'texture';
- default: { type: 'text'; text: string | null; } | { type: 'url'; url: string | null; } | null;
+ default: {
+ type: 'text'; text: string | null;
+ } | {
+ type: 'url'; url: string | null;
+ } | {
+ type: 'qr'; data: string | null;
+ } | null;
};
interface ColorParamDef extends CommonParamDef {
@@ -324,7 +334,11 @@ export class ImageEffector...`);
- const texture = v.type === 'text' ? await createTextureFromText(this.gl, v.text) : v.type === 'url' ? await createTextureFromUrl(this.gl, v.url) : null;
+ const texture =
+ v.type === 'text' ? await createTextureFromText(this.gl, v.text) :
+ v.type === 'url' ? await createTextureFromUrl(this.gl, v.url) :
+ v.type === 'qr' ? await createTextureFromQr(this.gl, { data: v.data }) :
+ null;
if (texture == null) continue;
this.paramTextures.set(textureKey, texture);
@@ -352,7 +366,12 @@ export class ImageEffector {
+ const $i = ensureSignin();
+
+ const qrCodeInstance = new QRCodeStyling({
+ width: resolution,
+ height: resolution,
+ margin: 42,
+ type: 'canvas',
+ data: options.data == null || options.data === '' ? `${url}/users/${$i.id}` : options.data,
+ image: $i.avatarUrl,
+ qrOptions: {
+ typeNumber: 0,
+ mode: 'Byte',
+ errorCorrectionLevel: 'H',
+ },
+ imageOptions: {
+ hideBackgroundDots: true,
+ imageSize: 0.3,
+ margin: 16,
+ crossOrigin: 'anonymous',
+ },
+ dotsOptions: {
+ type: 'dots',
+ },
+ cornersDotOptions: {
+ type: 'dot',
+ },
+ cornersSquareOptions: {
+ type: 'extra-rounded',
+ },
+ });
+
+ const blob = await qrCodeInstance.getRawData('png') as Blob | null;
+ if (blob == null) return null;
+
+ const image = await window.createImageBitmap(blob);
+
+ const texture = createTexture(gl);
+ gl.activeTexture(gl.TEXTURE0);
+ gl.bindTexture(gl.TEXTURE_2D, texture);
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, resolution, resolution, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
+ gl.bindTexture(gl.TEXTURE_2D, null);
+
+ return {
+ texture,
+ width: resolution,
+ height: resolution,
+ };
+}
diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
index 9b79e2bf94..f79acb44b0 100644
--- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
@@ -23,6 +23,7 @@ uniform float u_opacity;
uniform bool u_repeat;
uniform int u_alignX; // 0: left, 1: center, 2: right
uniform int u_alignY; // 0: top, 1: center, 2: bottom
+uniform float u_alignMargin;
uniform int u_fitMode; // 0: contain, 1: cover
out vec4 out_color;
@@ -51,6 +52,9 @@ void main() {
float x_offset = u_alignX == 0 ? x_scale / 2.0 : u_alignX == 2 ? 1.0 - (x_scale / 2.0) : 0.5;
float y_offset = u_alignY == 0 ? y_scale / 2.0 : u_alignY == 2 ? 1.0 - (y_scale / 2.0) : 0.5;
+ x_offset += (u_alignX == 0 ? 1.0 : u_alignX == 2 ? -1.0 : 0.0) * u_alignMargin;
+ y_offset += (u_alignY == 0 ? 1.0 : u_alignY == 2 ? -1.0 : 0.0) * u_alignMargin;
+
float angle = -(u_angle * PI);
vec2 center = vec2(x_offset, y_offset);
//vec2 centeredUv = (in_uv - center) * vec2(in_x_ratio, in_y_ratio);
@@ -86,7 +90,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
id: 'watermarkPlacement',
name: '(internal)',
shader,
- uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'fitMode'] as const,
+ uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'alignMargin', 'fitMode'] as const,
params: {
cover: {
type: 'boolean',
@@ -112,7 +116,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
},
align: {
type: 'align',
- default: { x: 'right', y: 'bottom' },
+ default: { x: 'right', y: 'bottom', margin: 0 },
},
opacity: {
type: 'number',
@@ -143,6 +147,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
gl.uniform1i(u.repeat, params.repeat ? 1 : 0);
gl.uniform1i(u.alignX, params.align.x === 'left' ? 0 : params.align.x === 'right' ? 2 : 1);
gl.uniform1i(u.alignY, params.align.y === 'top' ? 0 : params.align.y === 'bottom' ? 2 : 1);
+ gl.uniform1f(u.alignMargin, params.align.margin ?? 0);
gl.uniform1i(u.fitMode, params.cover ? 1 : 0);
},
});
diff --git a/packages/frontend/src/utility/watermark.ts b/packages/frontend/src/utility/watermark.ts
index 75807b30c4..b3525f158f 100644
--- a/packages/frontend/src/utility/watermark.ts
+++ b/packages/frontend/src/utility/watermark.ts
@@ -3,11 +3,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
+import type { ImageEffectorFx, ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
import { FX_watermarkPlacement } from '@/utility/image-effector/fxs/watermarkPlacement.js';
import { FX_stripe } from '@/utility/image-effector/fxs/stripe.js';
import { FX_polkadot } from '@/utility/image-effector/fxs/polkadot.js';
import { FX_checker } from '@/utility/image-effector/fxs/checker.js';
-import type { ImageEffectorFx, ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
import { ImageEffector } from '@/utility/image-effector/ImageEffector.js';
const WATERMARK_FXS = [
@@ -17,6 +17,8 @@ const WATERMARK_FXS = [
FX_checker,
] as const satisfies ImageEffectorFx[];
+type Align = { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom'; margin?: number; };
+
export type WatermarkPreset = {
id: string;
name: string;
@@ -27,7 +29,7 @@ export type WatermarkPreset = {
repeat: boolean;
scale: number;
angle: number;
- align: { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom' };
+ align: Align;
opacity: number;
} | {
id: string;
@@ -38,7 +40,14 @@ export type WatermarkPreset = {
repeat: boolean;
scale: number;
angle: number;
- align: { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom' };
+ align: Align;
+ opacity: number;
+ } | {
+ id: string;
+ type: 'qr';
+ data: string;
+ scale: number;
+ align: Align;
opacity: number;
} | {
id: string;
@@ -125,6 +134,23 @@ export class WatermarkRenderer {
},
},
};
+ } else if (layer.type === 'qr') {
+ return {
+ fxId: 'watermarkPlacement',
+ id: layer.id,
+ params: {
+ repeat: false,
+ scale: layer.scale,
+ align: layer.align,
+ angle: 0,
+ opacity: layer.opacity,
+ cover: false,
+ watermark: {
+ type: 'qr',
+ data: layer.data,
+ },
+ },
+ };
} else if (layer.type === 'stripe') {
return {
fxId: 'stripe',
@@ -164,7 +190,7 @@ export class WatermarkRenderer {
},
};
} else {
- throw new Error(`Unknown layer type`);
+ throw new Error(`Unrecognized layer type: ${(layer as any).type}`);
}
});
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f8a10c004..7b9782b0cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -847,6 +847,12 @@ importers:
punycode.js:
specifier: 2.3.1
version: 2.3.1
+ qr-code-styling:
+ specifier: 1.9.2
+ version: 1.9.2
+ qr-scanner:
+ specifier: 1.4.2
+ version: 1.4.2
rollup:
specifier: 4.50.1
version: 4.50.1
@@ -9374,6 +9380,16 @@ packages:
resolution: {integrity: sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==}
engines: {node: '>=6.0.0'}
+ qr-code-styling@1.9.2:
+ resolution: {integrity: sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==}
+ engines: {node: '>=18.18.0'}
+
+ qr-scanner@1.4.2:
+ resolution: {integrity: sha512-kV1yQUe2FENvn59tMZW6mOVfpq9mGxGf8l6+EGaXUOd4RBOLg7tRC83OrirM5AtDvZRpdjdlXURsHreAOSPOUw==}
+
+ qrcode-generator@1.5.2:
+ resolution: {integrity: sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==}
+
qrcode@1.5.4:
resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
engines: {node: '>=10.13.0'}
@@ -20999,6 +21015,16 @@ snapshots:
pvutils@1.1.3: {}
+ qr-code-styling@1.9.2:
+ dependencies:
+ qrcode-generator: 1.5.2
+
+ qr-scanner@1.4.2:
+ dependencies:
+ '@types/offscreencanvas': 2019.7.0
+
+ qrcode-generator@1.5.2: {}
+
qrcode@1.5.4:
dependencies:
dijkstrajs: 1.0.2
{{ i18n.ts._watermarkEditor.text }}
{{ i18n.ts._watermarkEditor.image }}
+ {{ i18n.ts._watermarkEditor.qr }}
{{ i18n.ts._watermarkEditor.stripe }}
{{ i18n.ts._watermarkEditor.polkadot }}
{{ i18n.ts._watermarkEditor.checker }}
@@ -95,7 +85,7 @@ function createTextLayer(): WatermarkPreset['layers'][number] {
id: genId(),
type: 'text',
text: `(c) @${$i.username}`,
- align: { x: 'right', y: 'bottom' },
+ align: { x: 'right', y: 'bottom', margin: 0 },
scale: 0.3,
angle: 0,
opacity: 0.75,
@@ -109,7 +99,7 @@ function createImageLayer(): WatermarkPreset['layers'][number] {
type: 'image',
imageId: null,
imageUrl: null,
- align: { x: 'right', y: 'bottom' },
+ align: { x: 'right', y: 'bottom', margin: 0 },
scale: 0.3,
angle: 0,
opacity: 0.75,
@@ -118,6 +108,17 @@ function createImageLayer(): WatermarkPreset['layers'][number] {
};
}
+function createQrLayer(): WatermarkPreset['layers'][number] {
+ return {
+ id: genId(),
+ type: 'qr',
+ data: '',
+ align: { x: 'right', y: 'bottom', margin: 0 },
+ scale: 0.3,
+ opacity: 1,
+ };
+}
+
function createStripeLayer(): WatermarkPreset['layers'][number] {
return {
id: genId(),
@@ -165,7 +166,7 @@ const props = defineProps<{
const preset = reactive
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
new file mode 100644
index 0000000000..28f80e0963
--- /dev/null
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -0,0 +1,234 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
new file mode 100644
index 0000000000..2e5629f232
--- /dev/null
+++ b/packages/frontend/src/pages/qr.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+ ![Misskey Logo]()
+ ![Misskey Logo]()
+
+
+
+
+ {{ acct }}
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index cfa4df18fc..2d794f2e30 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
+ {{ i18n.ts._qr.showTabTitle }}
+ {{ i18n.ts._qr.readTabTitle }}
+
+
+ + +