I would like to present a web app for creating simple story covers with text (and possibly other stuff in the future):

https://covercreator-eba28.web.app/cover-creator

What the hell is this, you ask? Well… ever had a situation where you have a good story, catchy title, and synopsis, but only a simple image as a cover? Ever wanted to add a nice, outlined text with a title and/or author on the image to generate a cool cover like some other stories have, but didn’t know how? Well, here is a little something that may help you out.

It works using the magic of CSS, react, and JS/TypeScript, and allows you to add simple text blocks to an image, position them, choose a background (color, transparency), a font (color, size, style), an outline (color, width), and a few other things, and then to capture them as a ready-to-use cover image.

Before I post it in any of the more general groups, I would like to ask you for some feedback here

How to use it, step by step:
Let’s say we want to re-create a cover I made for A Prank To Die For - Fimfiction.

1. Grab the base image for your cover, in this case:
https://derpibooru.org/images/1500414

2. Load it, in the image tab:

3. Go to the 'Block' tab, and add a new block, it will appear at the top of the image:

4. Select the newly added block by clicking on it (it will change the border to red). Click on the 'Text options' (‘A’) button on the bottom, and then type 'A Prank To Die For' in the text area. Notice how the text in the block changes as you type:

5. It still doesn’t look quite right, the font is ugly, too small, and has the wrong color… Let’s…

• switch the font to ‘Equestria’ and increase the font size to 14 (AD1),
• set the color to #f8eb00, (AD2)
• and add some outline/stroke (AD3)

6. That’s more like it! …but if you look at the original, we still need to add the author at the bottom. The fastest way is to clone the current block and move it down. To do that, click the 'Clone' icon (AD1), then the 'Move' icon (AD2) and move the block to the bottom, then change the text to ‘By Huk’. We can switch to 'Zoom' 25% to help us a bit:

7. That’s more like it! Let’s go to the 'File' tab, and grab the final product. First switch zoom to 100% (AD1) then click the capture button (AD2). You can also change the file type and scale factor (small arrow next to the capture button):

8. We may also want to save the data file for future edits. We can save it to the disk (AD1) or to the browser’s cache (AD2). We can also enable 'Auto-save to cache' whenever we perform a change (AD3). Files saved to the cache can be loaded by list later on (AD4):

9. Here is the final product:

Limitations / BUGS:

1. Since it uses the magic of CSS + HTML + JS and some… clever workarounds to capture the content as image, the text may shift slightly, and some effects may be completely cut. This is especially true when exporting from one browser and loading in another. For the most consistent results, stick with one browser.
2. Due to browser security limitations, it’s next to impossible to detect fonts installed on someone’s system. The app relies on a list of known fonts and always shows them as available. If you search for the font and you see that it renders correctly in the search box, consider it available.
3. Due to the way block size and position are calculated, resizing the browser may shift blocks a little. Hopefully, this shouldn’t be very visible anymore, but it may happen. Also, final results, file size, and quality (in the case of JPG) can vary slightly between browsers.
4. Due to the way font calculation works, adding a block in a certain zoom level may make the font slightly bigger/smaller once you switch to zoom 100%.
5. The outline on some fonts seems broken. That’s due to the way the webkit-text-stroke property used to render it works under the hood. Sometimes bolded fonts look better, other times non-bolded fonts look better. You’ll have to experiment with each one. Unfortunately, some fonts are just broken when using the outline
6. Comic Sans Ms font – there is some problem with the outline on this font, that that manifests itself on Chrome (and other webkit browsers) as visible ‘holes’ in some letters. I recommend switching to Comic Neue OR using Firefox (the problem doesn’t seem to manifest over there).
7. For now, the app is desktop-oriented and pretty much useless on mobile (that may change in the future).
8. UI is… what it is. It’s bare and lacks polish…
9. No support for loading custom external fonts from Google Fonts or similar. I plan to add it in the future if anyone is interested.
10. Bugs? Probably many

Any thoughts and comments are greatly appreciated

7900579 This looks very useful.

One could even use this for generating memes.

7900669

Well, it wasn't built with that thing in mind, but... I guess you could use it like that. Just remember, I take 50% of the money generated by each meme

7900669
I'll set up a frontend to his half megabyte of JS, and only charge 25% royalty

No but seriously: It seems useful for people who rather spend time writing than Gimping.