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

fix

Browse source
This commit is contained in:
kakkokari-gtyih 2024-12-16 10:48:04 +09:00
parent d5ca458c40
commit d2b2422697
1 changed files with 46 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -42,40 +42,53 @@ export function applyWatermark(img: string | Blob, el: HTMLCanvasElement, config
watermark.onload = () => { watermark.onload = () => {
const width = config.width || watermark.width; const width = config.width || watermark.width;
const height = config.height || watermark.height; const height = config.height || watermark.height;
const x = (() => {
switch (config.anchor) {
case 'center':
case 'top':
case 'bottom':
return (canvas.width - width) / 2;
case 'left':
case 'top-left':
case 'bottom-left':
return 0;
case 'right':
case 'top-right':
case 'bottom-right':
return canvas.width - width;
}
})();
const y = (() => {
switch (config.anchor) {
case 'center':
case 'left':
case 'right':
return (canvas.height - height) / 2;
case 'top':
case 'top-left':
case 'top-right':
return 0;
case 'bottom':
case 'bottom-left':
case 'bottom-right':
return canvas.height - height;
}
})();
ctx.globalAlpha = config.opacity; ctx.globalAlpha = config.opacity;
ctx.drawImage(watermark, x, y, width, height); if (config.repeat !== false) {
const resizedWatermark = document.createElement('canvas');
resizedWatermark.width = width;
resizedWatermark.height = height;
const resizedCtx = resizedWatermark.getContext('2d')!;
resizedCtx.drawImage(watermark, 0, 0, width, height);
const pattern = ctx.createPattern(resizedWatermark, config.repeat === true ? 'repeat' : `repeat-${config.repeat}`);
if (pattern) {
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
} else {
const x = (() => {
switch (config.anchor) {
case 'center':
case 'top':
case 'bottom':
return (canvas.width - width) / 2;
case 'left':
case 'top-left':
case 'bottom-left':
return 0;
case 'right':
case 'top-right':
case 'bottom-right':
return canvas.width - width;
}
})();
const y = (() => {
switch (config.anchor) {
case 'center':
case 'left':
case 'right':
return (canvas.height - height) / 2;
case 'top':
case 'top-left':
case 'top-right':
return 0;
case 'bottom':
case 'bottom-left':
case 'bottom-right':
return canvas.height - height;
}
})();
ctx.drawImage(watermark, x, y, width, height);
}
}; };
watermark.src = config.fileUrl; watermark.src = config.fileUrl;
} }