9

How I built a "Text to Handwriting Converter" ✍️

 2 years ago
source link: https://dev.to/fatihtelis/how-i-built-a-text-to-handwriting-converter-2mf
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for How I built a
Fatih Telis

Posted on Feb 9

How I built a "Text to Handwriting Converter" ✍️

Hi everyone, I hope you are all fine. 😊

Today, I want to talk about how I developed a text to handwriting converter for my all-in-one toolbox project - 10015.io.

When I decided to code a text to handwriting converter, I analyzed the tools on the web and the main problem was there are lots of settings which confuses people in these tools and it is not easy to get the result immediately. So, my main aim was to build a "minimalistic converter" which does all the dirty job behind the scenes.

There are just 3 settings in the tool I developed. You can choose:

  • Handwriting font
  • Ink color
  • Paper type

That's it. I didn't add any other settings which will make the tool complicated. Here is the settings section of the tool.

You can choose different paper types as background. I have a configuration file for each paper type which adjusts the paddings and line heights automatically. You can even send a love letter to your lover by using this tool. 😉

Here you can create your own handwriting text.

https://10015.io/tools/text-to-handwriting-converter

I used "html2canvas" npm package for converting the results into jpeg and "jspdf" package for converting it to PDF. All other process is to adjust the paper layout and text. For adding Google Fonts to the project dynamically, I used react-webfont-loader by dr-kobros.

For more online tools, you can visit 10015.io.

If you have any question about the development or suggestions about the text to handwriting converter, feel free to ask.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK