Melody Nomás ☆ Aomine Daiki's Girlfriend
500,957 views
419 followers
10,577 updates
0 tips
I NEED TIPS: I want to program a website where my club members can make their own cards, freely changing the color of the borders, information, icon, and background, and then export them to PNG, but I don't know where to start. I'm really lost! Is there a tutorial that can guide me? :,-(
3 likes
![[tofokyo.com] avatar](/site_screenshots/18/56/tofokyo/index.html.50x50.webp)
![xX [ TR/BZ ] Xx avatar](/site_screenshots/41/77/toribytez/index.html.50x50.webp)
Hmmm, I mean I don't have a full know-how on tags but I think you need to make a html canvas element first and foremost, use javascript to have it import image files at specific coordinates on itself and then be able to export the canvas at its result state to png. That's the technical concept but that's about where I can help you ends because I've only ever used divs instead of canvases in DOM manipulation.
Also you'll need to prepare different image parts for the color and everything, unless you wanna go the more manual way where you just code so it draws a rectangle on the canvas. You'll also need to make it possible to change the color by direct color select (if you're drawing the rectangles with code directly) or by hue changing (if using a premade part image).
*I don't have a full know-how on canvas tags (I think canvas got removed because I put them in the html pointy brackets)
I must add, u could try doing this with divs but it's a bit troublesome as you'll need a screenshotter script rather than a canvas grabber script, canvas is easier since it'll only capture and save the canvas' content only. For a screenshotter (for if you decide to use divs stacked on top one another like I usually do in my game code), you'll need to specify which coordinates and crop area size to capture.