usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update image-label-renderer.ts

This commit is contained in:
syuilo 2025-10-30 18:40:21 +09:00
parent a240847a68
commit 91bc3b3134
1 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
packages/frontend/src/utility/image-label-renderer.ts
View File

@ -85,55 +85,59 @@ export class ImageLabelRenderer {
} }
} }
const paddingTop = Math.floor(imageAreaH * params.frameThickness);
const paddingLeft = Math.floor(imageAreaH * params.frameThickness);
const paddingRight = Math.floor(imageAreaH * params.frameThickness);
const paddingBottom = Math.floor(imageAreaH * params.labelThickness); const paddingBottom = Math.floor(imageAreaH * params.labelThickness);
const renderWidth = imageAreaW; const renderWidth = imageAreaW + paddingLeft + paddingRight;
const renderHeight = imageAreaH + paddingBottom; const renderHeight = imageAreaH + paddingTop + paddingBottom;
const aspectRatio = renderWidth / renderHeight; const aspectRatio = renderWidth / renderHeight;
const ctx = window.document.createElement('canvas').getContext('2d')!; const labelCanvasCtx = window.document.createElement('canvas').getContext('2d')!;
ctx.canvas.width = renderWidth; labelCanvasCtx.canvas.width = renderWidth;
ctx.canvas.height = paddingBottom; labelCanvasCtx.canvas.height = paddingBottom;
const fontSize = ctx.canvas.height / 6; const fontSize = labelCanvasCtx.canvas.height / 6;
const marginX = Math.max(fontSize * 2, (imageAreaW * params.frameThickness) / aspectRatio); const textsMarginLeft = Math.max(fontSize * 2, paddingLeft);
const textsMarginRight = textsMarginLeft;
const withQrCode = params.withQrCode; const withQrCode = params.withQrCode;
const qrSize = ctx.canvas.height * 0.6; const qrSize = labelCanvasCtx.canvas.height * 0.6;
const qrMarginX = Math.max((ctx.canvas.height - qrSize) / 2, (imageAreaW * params.frameThickness) / aspectRatio); const qrMarginX = Math.max((labelCanvasCtx.canvas.height - qrSize) / 2, (imageAreaW * params.frameThickness) / aspectRatio);
ctx.fillStyle = '#ffffff'; labelCanvasCtx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); labelCanvasCtx.fillRect(0, 0, labelCanvasCtx.canvas.width, labelCanvasCtx.canvas.height);
ctx.fillStyle = '#000000'; labelCanvasCtx.fillStyle = '#000000';
ctx.font = `bold ${fontSize}px sans-serif`; labelCanvasCtx.font = `bold ${fontSize}px sans-serif`;
ctx.textBaseline = 'middle'; labelCanvasCtx.textBaseline = 'middle';
const titleY = params.text === '' ? (ctx.canvas.height / 2) : (ctx.canvas.height / 2) - (fontSize * 0.9); const titleY = params.text === '' ? (labelCanvasCtx.canvas.height / 2) : (labelCanvasCtx.canvas.height / 2) - (fontSize * 0.9);
if (params.centered) { if (params.centered) {
ctx.textAlign = 'center'; labelCanvasCtx.textAlign = 'center';
ctx.fillText(this.interpolateText(params.title), ctx.canvas.width / 2, titleY, ctx.canvas.width - marginX - marginX); labelCanvasCtx.fillText(this.interpolateText(params.title), labelCanvasCtx.canvas.width / 2, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight);
} else { } else {
ctx.textAlign = 'left'; labelCanvasCtx.textAlign = 'left';
ctx.fillText(this.interpolateText(params.title), marginX, titleY, ctx.canvas.width - marginX - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0)); labelCanvasCtx.fillText(this.interpolateText(params.title), textsMarginLeft, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0));
} }
ctx.fillStyle = '#00000088'; labelCanvasCtx.fillStyle = '#00000088';
ctx.font = `${fontSize * 0.85}px sans-serif`; labelCanvasCtx.font = `${fontSize * 0.85}px sans-serif`;
ctx.textBaseline = 'middle'; labelCanvasCtx.textBaseline = 'middle';
const textY = params.title === '' ? (ctx.canvas.height / 2) : (ctx.canvas.height / 2) + (fontSize * 0.9); const textY = params.title === '' ? (labelCanvasCtx.canvas.height / 2) : (labelCanvasCtx.canvas.height / 2) + (fontSize * 0.9);
if (params.centered) { if (params.centered) {
ctx.textAlign = 'center'; labelCanvasCtx.textAlign = 'center';
ctx.fillText(this.interpolateText(params.text), ctx.canvas.width / 2, textY, ctx.canvas.width - marginX - marginX); labelCanvasCtx.fillText(this.interpolateText(params.text), labelCanvasCtx.canvas.width / 2, textY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight);
} else { } else {
ctx.textAlign = 'left'; labelCanvasCtx.textAlign = 'left';
ctx.fillText(this.interpolateText(params.text), marginX, textY, ctx.canvas.width - marginX - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0)); labelCanvasCtx.fillText(this.interpolateText(params.text), textsMarginLeft, textY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0));
} }
const $i = ensureSignin(); const $i = ensureSignin();
if (withQrCode) { if (withQrCode) {
const qrCodeInstance = new QRCodeStyling({ const qrCodeInstance = new QRCodeStyling({
width: ctx.canvas.height, width: labelCanvasCtx.canvas.height,
height: ctx.canvas.height, height: labelCanvasCtx.canvas.height,
margin: 0, margin: 0,
type: 'canvas', type: 'canvas',
data: `${url}/users/${$i.id}`, data: `${url}/users/${$i.id}`,
@ -166,21 +170,17 @@ export class ImageLabelRenderer {
const qrImageBitmap = await window.createImageBitmap(blob); const qrImageBitmap = await window.createImageBitmap(blob);
ctx.drawImage( labelCanvasCtx.drawImage(
qrImageBitmap, qrImageBitmap,
ctx.canvas.width - qrSize - qrMarginX, labelCanvasCtx.canvas.width - qrSize - qrMarginX,
(ctx.canvas.height - qrSize) / 2, (labelCanvasCtx.canvas.height - qrSize) / 2,
qrSize, qrSize,
qrSize, qrSize,
); );
qrImageBitmap.close(); qrImageBitmap.close();
} }
const data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); const data = labelCanvasCtx.getImageData(0, 0, labelCanvasCtx.canvas.width, labelCanvasCtx.canvas.height);
const padding = params.frameThickness;
const paddingX = padding / aspectRatio;
const paddingY = padding;
await this.effector.registerTexture('label', data); await this.effector.registerTexture('label', data);
@ -192,8 +192,8 @@ export class ImageLabelRenderer {
params: { params: {
image: 'image', image: 'image',
label: 'label', label: 'label',
imageMarginX: paddingX, imageMarginX: paddingLeft / renderWidth,
imageMarginY: paddingY, imageMarginY: paddingTop / renderHeight,
}, },
}]); }]);
} }