diff --git a/pages/api/weeks/[weeks].js b/pages/api/weeks/[weeks].js index 0b3ef57..2188708 100644 --- a/pages/api/weeks/[weeks].js +++ b/pages/api/weeks/[weeks].js @@ -47,15 +47,15 @@ const ApiResponse = async (req, res) => { ctx.fillStyle = "#cc3333"; //ctx.textAlign = "left"; ctx.font = "80px Dancing Script"; - ctx.strokeText("weeks today is", 40, 500); - ctx.fillText("weeks today is", 40, 500); + ctx.strokeText("weeks until", 40, 500); + ctx.fillText("weeks until", 40, 500); ctx.strokeStyle = "white"; ctx.fillStyle = "#cc3333"; //ctx.textAlign = "left"; ctx.font = "80px Dancing Script"; - ctx.strokeText("Christmas Day", 40, 610); - ctx.fillText("Christmas Day", 40, 610); + ctx.strokeText("Christmas !!!", 40, 610); + ctx.fillText("Christmas !!!", 40, 610); ctx.strokeStyle = "white"; ctx.fillStyle = "white"; diff --git a/pages/api/weekstoday/[weeks].js b/pages/api/weekstoday/[weeks].js new file mode 100644 index 0000000..0b3ef57 --- /dev/null +++ b/pages/api/weekstoday/[weeks].js @@ -0,0 +1,78 @@ +import Canvas, { registerFont } from "canvas"; +import fs from "fs"; + +const ApiResponse = async (req, res) => { + //const { color } = req.query; + const imageRef = req.query; + const canvas = Canvas.createCanvas(940, 788); + const ctx = canvas.getContext("2d"); + + const rndInt = Math.floor(Math.random() * 367) + 1; + + console.log(rndInt); + + const background = await Canvas.loadImage( + "public/images/backgrounds/background-" + rndInt + ".jpg" + ); + + registerFont("public/fonts/Dancing_Script/static/DancingScript-Bold.ttf", { + family: "Dancing", + }); + + registerFont("public/fonts/Amatic_SC/AmaticSC-Bold.ttf", { + family: "AmaticSC", + }); + + ctx.drawImage(background, 0, 0, canvas.width, canvas.height); + + let x = canvas.width / 2 + 80; + let y = canvas.height - canvas.height / 2.5; + let imageStr = imageRef.weeks; + + console.log(imageStr, x, y); + ctx.lineWidth = 25; + + ctx.strokeStyle = "#cc3333"; + ctx.fillStyle = "white"; + + // ctx.lineJoin = "round"; + ctx.font = "245px Dancing"; + + ctx.strokeText(imageStr, 40, 375); + + ctx.fillText(imageStr, 40, 375); + + ctx.lineWidth = 10; + ctx.strokeStyle = "white"; + ctx.fillStyle = "#cc3333"; + //ctx.textAlign = "left"; + ctx.font = "80px Dancing Script"; + ctx.strokeText("weeks today is", 40, 500); + ctx.fillText("weeks today is", 40, 500); + + ctx.strokeStyle = "white"; + ctx.fillStyle = "#cc3333"; + //ctx.textAlign = "left"; + ctx.font = "80px Dancing Script"; + ctx.strokeText("Christmas Day", 40, 610); + ctx.fillText("Christmas Day", 40, 610); + + ctx.strokeStyle = "white"; + ctx.fillStyle = "white"; + ctx.textAlign = "left"; + ctx.font = "50px AmaticSC"; + //ctx.strokeText("WWW.GETAHEADCHRISTMAS.CO.UK", x, y); + ctx.fillText("WWW.GETAHEADCHRISTMAS.CO.UK", 40, 740); + + console.log(ctx); + + const png = canvas.toBuffer("image/png"); + + res.setHeader( + "content-disposition", + "attachment; filename=" + imageRef.weeks + "-weeks.png" + ); + res.status(200).send(png); +}; + +export default ApiResponse; diff --git a/pages/weekstoday.js b/pages/weekstoday.js new file mode 100644 index 0000000..badd17c --- /dev/null +++ b/pages/weekstoday.js @@ -0,0 +1,22 @@ +// 404.js + +import Image from "next/image"; +import { useRouter } from "next/router"; + +const FourOhFour = (props) => { + const router = useRouter(); + + let numbWeeks = router.query.n; + return ( +