public/singapore_rain_radar
1
0
Fork 0
mirror of https://git.roussel.pro/public-website/singapore_rain_radar.git synced 2026-02-09 02:20:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

improved image by making overlay transparent, fix #3

Browse Source
This commit is contained in:
Quentin Roussel
2024-10-14 18:09:04 +08:00
parent 9470548449
commit 30974eb85f
1 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
video.mjs
View File

@@ -6,14 +6,17 @@ async function overlayImage(time_string) {
let ctx = createCanvas(853, 479).getContext('2d'); let ctx = createCanvas(853, 479).getContext('2d');
let bg = await loadImage('bg.png') let bg = await loadImage('bg.png')
ctx.globalAlpha = 1;
ctx.drawImage(bg, 0, 0, 853, 479) ctx.drawImage(bg, 0, 0, 853, 479)
let overlay = await loadImage('images/raw/' + time_string + '.png') let overlay = await loadImage('images/raw/' + time_string + '.png')
ctx.globalAlpha = 0.6;
ctx.drawImage(overlay, 0, 0, 853, 479) ctx.drawImage(overlay, 0, 0, 853, 479)
let text = time_string.substring(8, 10) + ':' + time_string.substring(10, 12); let text = time_string.substring(8, 10) + ':' + time_string.substring(10, 12);
ctx.font = 'bold 70px sans-serif'; ctx.font = 'bold 70px sans-serif';
ctx.fillStyle = 'rgba(0,0,0,0.7)'; ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.globalAlpha = 0.9;
ctx.fillText(text, 853 - 250, 479 - 40); ctx.fillText(text, 853 - 250, 479 - 40);
return ctx.canvas.toBuffer("image/png"); return ctx.canvas.toBuffer("image/png");