OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-27 06:00:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix

Browse source
This commit is contained in:
kakkokari-gtyih 2024-12-26 00:43:43 +09:00
parent 0b23bebb7e
commit eac61edf2c
1 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/frontend/src/scripts/watermark.ts
View file

@ -160,6 +160,7 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
return { width, height }; return { width, height };
})(); })();
const rotateRad = (config.rotate ?? 0) * Math.PI / 180;
ctx.globalAlpha = config.opacity ?? 1; ctx.globalAlpha = config.opacity ?? 1;
@ -181,7 +182,6 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
if (pattern) { if (pattern) {
ctx.fillStyle = pattern; ctx.fillStyle = pattern;
if (config.rotate != null && config.rotate !== 0) { if (config.rotate != null && config.rotate !== 0) {
const rotateRad = config.rotate * Math.PI / 180;
ctx.translate(canvas.width / 2, canvas.height / 2); ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(rotateRad); ctx.rotate(rotateRad);
ctx.translate(-canvas.width / 2, -canvas.height / 2); ctx.translate(-canvas.width / 2, -canvas.height / 2);
@ -196,6 +196,12 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
} }
} else { } else {
const x = (() => { const x = (() => {
let rotateX = 0; // 回転によるX座標の補正
if (config.rotate != null && config.rotate !== 0 && !config.noBoundingBoxExpansion) {
rotateX = Math.abs(Math.abs(width * Math.cos(rotateRad)) + Math.abs(height * Math.sin(rotateRad)) - width) / 2;
}
switch (config.anchor) { switch (config.anchor) {
case 'center': case 'center':
case 'top': case 'top':
@ -204,11 +210,11 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
case 'left': case 'left':
case 'top-left': case 'top-left':
case 'bottom-left': case 'bottom-left':
return 0 + (config.padding ? config.padding.left ?? 0 : 0); return rotateX + (config.padding ? config.padding.left ?? 0 : 0);
case 'right': case 'right':
case 'top-right': case 'top-right':
case 'bottom-right': case 'bottom-right':
return canvas.width - width - (config.padding ? config.padding.right ?? 0 : 0); return canvas.width - width - (config.padding ? config.padding.right ?? 0 : 0) - rotateX;
} }
})(); })();
@ -216,7 +222,6 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement | Offsc
let rotateY = 0; // 回転によるY座標の補正 let rotateY = 0; // 回転によるY座標の補正
if (config.rotate != null && config.rotate !== 0 && !config.noBoundingBoxExpansion) { if (config.rotate != null && config.rotate !== 0 && !config.noBoundingBoxExpansion) {
const rotateRad = config.rotate * Math.PI / 180;
rotateY = Math.abs(Math.abs(width * Math.sin(rotateRad)) + Math.abs(height * Math.cos(rotateRad)) - height) / 2; rotateY = Math.abs(Math.abs(width * Math.sin(rotateRad)) + Math.abs(height * Math.cos(rotateRad)) - height) / 2;
} }