diff --git a/packages/frontend/src/components/MkImageLabelEditorDialog.vue b/packages/frontend/src/components/MkImageLabelEditorDialog.vue index 81e1438d86..ef0e4d971c 100644 --- a/packages/frontend/src/components/MkImageLabelEditorDialog.vue +++ b/packages/frontend/src/components/MkImageLabelEditorDialog.vue @@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
- + diff --git a/packages/frontend/src/utility/image-effector/fxs/label.glsl b/packages/frontend/src/utility/image-effector/fxs/label.glsl index 7ecc48acd1..2cb379e363 100644 --- a/packages/frontend/src/utility/image-effector/fxs/label.glsl +++ b/packages/frontend/src/utility/image-effector/fxs/label.glsl @@ -17,17 +17,27 @@ uniform float u_imageMarginX; uniform float u_imageMarginY; out vec4 out_color; +float remap(float value, float inputMin, float inputMax, float outputMin, float outputMax) { + return outputMin + (outputMax - outputMin) * ((value - inputMin) / (inputMax - inputMin)); +} + void main() { float labelRatio = u_labelEnabled ? (u_labelResolution.y / in_resolution.y) : 0.0; - vec4 image_color = texture(u_image, (in_uv / vec2(1.0, 1.0 - labelRatio) / vec2(1.0 - u_imageMarginX - u_imageMarginX, 1.0 - u_imageMarginY)) - vec2(u_imageMarginX, u_imageMarginY)); + + vec4 image_color = texture(u_image, vec2( + remap(in_uv.x, u_imageMarginX, 1.0 - u_imageMarginX, 0.0, 1.0), + remap(in_uv.y, u_imageMarginY, 1.0 - labelRatio, 0.0, 1.0) + )); + vec4 label_color = texture(u_label, (in_uv - vec2(0.0, 1.0 - labelRatio)) / vec2(1.0, labelRatio)); + if (in_uv.y > (1.0 - labelRatio)) { out_color = label_color; } else { - if (in_uv.x < u_imageMarginX || in_uv.x > (1.0 - u_imageMarginX) || in_uv.y < u_imageMarginY) { - out_color = vec4(1.0, 1.0, 1.0, 1.0); - } else { + if (in_uv.y > u_imageMarginY && in_uv.x > u_imageMarginX && in_uv.x < (1.0 - u_imageMarginX)) { out_color = image_color; + } else { + out_color = vec4(1.0, 1.0, 1.0, 1.0); } } } diff --git a/packages/frontend/src/utility/image-label-renderer.ts b/packages/frontend/src/utility/image-label-renderer.ts index 3816917a3e..64ca0812ae 100644 --- a/packages/frontend/src/utility/image-label-renderer.ts +++ b/packages/frontend/src/utility/image-label-renderer.ts @@ -101,7 +101,7 @@ export class ImageLabelRenderer { const textsMarginRight = textsMarginLeft; const withQrCode = params.withQrCode; const qrSize = labelCanvasCtx.canvas.height * 0.6; - const qrMarginX = Math.max((labelCanvasCtx.canvas.height - qrSize) / 2, (imageAreaW * params.frameThickness) / aspectRatio); + const qrMarginRight = Math.max((labelCanvasCtx.canvas.height - qrSize) / 2, paddingRight); labelCanvasCtx.fillStyle = '#ffffff'; labelCanvasCtx.fillRect(0, 0, labelCanvasCtx.canvas.width, labelCanvasCtx.canvas.height); @@ -116,7 +116,7 @@ export class ImageLabelRenderer { labelCanvasCtx.fillText(this.interpolateText(params.title), labelCanvasCtx.canvas.width / 2, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight); } else { labelCanvasCtx.textAlign = 'left'; - labelCanvasCtx.fillText(this.interpolateText(params.title), textsMarginLeft, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0)); + labelCanvasCtx.fillText(this.interpolateText(params.title), textsMarginLeft, titleY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginRight + (fontSize * 1)) : 0)); } labelCanvasCtx.fillStyle = '#00000088'; @@ -129,7 +129,7 @@ export class ImageLabelRenderer { labelCanvasCtx.fillText(this.interpolateText(params.text), labelCanvasCtx.canvas.width / 2, textY, labelCanvasCtx.canvas.width - textsMarginLeft - textsMarginRight); } else { labelCanvasCtx.textAlign = 'left'; - labelCanvasCtx.fillText(this.interpolateText(params.text), textsMarginLeft, textY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginX + (fontSize * 1)) : 0)); + labelCanvasCtx.fillText(this.interpolateText(params.text), textsMarginLeft, textY, labelCanvasCtx.canvas.width - textsMarginLeft - (withQrCode ? (qrSize + qrMarginRight + (fontSize * 1)) : 0)); } const $i = ensureSignin(); @@ -172,7 +172,7 @@ export class ImageLabelRenderer { labelCanvasCtx.drawImage( qrImageBitmap, - labelCanvasCtx.canvas.width - qrSize - qrMarginX, + labelCanvasCtx.canvas.width - qrSize - qrMarginRight, (labelCanvasCtx.canvas.height - qrSize) / 2, qrSize, qrSize,