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