repeatのrotateに対応

This commit is contained in:
kakkokari-gtyih 2024-12-16 11:33:04 +09:00
parent 8f3241a6ae
commit 7d80c2129b
2 changed files with 14 additions and 2 deletions

View File

@ -73,7 +73,8 @@ const watermarkConfig = ref<WatermarkConfig>(defaultStore.state.watermarkConfig
opacity: 0.5,
anchor: 'bottom-right',
gravity: 'auto',
repeat: false,
repeat: true,
rotate: 15,
__bypassMediaProxy: true,
});
//#endregion

View File

@ -56,7 +56,18 @@ export async function applyWatermark(img: string | Blob, el: HTMLCanvasElement,
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);
if (config.rotate) {
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(config.rotate * Math.PI / 180);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
const rotatedWidth = Math.abs(canvas.width * Math.cos(config.rotate * Math.PI / 180)) + Math.abs(canvas.height * Math.sin(config.rotate * Math.PI / 180));
const rotatedHeight = Math.abs(canvas.width * Math.sin(config.rotate * Math.PI / 180)) + Math.abs(canvas.height * Math.cos(config.rotate * Math.PI / 180));
const x = Math.abs(rotatedWidth - canvas.width) / -2;
const y = Math.abs(rotatedHeight - canvas.height) / -2;
ctx.fillRect(x, y, rotatedWidth, rotatedHeight);
} else {
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
}
} else {
const x = (() => {