forked from saurabhdaware/text-to-handwriting
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
254 lines (224 loc) · 13.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125454191-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-125454191-4');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#09f" />
<meta name="description" content="I hate writing assignments so I made this tool that converts text to an image that looks like handwriting. You can copy paste text content into the textbox and click generate image button to generate image. Text to Handwriting">
<meta name="keywords" content="text to handwriting, text-to-handwrting, saurabh text to handwriting, convert text to image, write assignment online" >
<meta name="mobile-web-app-capable" content="yes">
<meta name="author" content="Saurabh Daware" />
<meta name="copyright" content="Saurabh Daware" />
<meta name="robots" content="follow"/>
<meta property="og:type" content="website" />
<meta property="og:title" content="Text to Handwriting">
<meta property="og:url" content="https://saurabhdaware.github.io/text-to-handwriting" />
<meta property="og:description" content="I hate writing assignments so I made this tool that converts text to an image that looks like handwriting. You can copy paste text content into the textbox and click generate image button to generate image. Text to Handwriting">
<meta property="og:site_name" content="Text to Handwriting">
<meta property="og:image:secure_url" itemprop="image" content="https://res.cloudinary.com/saurabhdaware/image/upload/v1585413874/saurabh2019/projects/text-to-handwriting.png">
<meta property="og:image" itemprop="image" content="https://res.cloudinary.com/saurabhdaware/image/upload/v1585413874/saurabh2019/projects/text-to-handwriting.png">
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="337" />
<meta name=twitter:card content=summary_large_image />
<meta name=twitter:creator content=@saurabhcodes />
<title>Text to Handwriting</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Homemade+Apple&display=swap" />
<link rel="preload" href="https://fonts.googleapis.com/css?family=Caveat|Liu+Jian+Mao+Cao&display=swap" as="style" onload="this.rel = 'stylesheet'; this.onload = null;" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<main class="form-container">
<h1 style="margin-bottom: 7px;">Text to Handwriting</h1>
<br/><br/>
<section>
<form id="generate-image-form">
<div class="row responsive-row">
<div class="col">
<label for="handwriting-font">Handwriting Font</label>
<select id="handwriting-font">
<option default
style="font-family: 'Homemade Apple'"
value="'Homemade Apple', cursive"
>Homemade Apple</option>
<option
style="font-family: 'Caveat', cursive; font-size: 13pt;"
value="'Caveat', cursive"
>Caveat</option>
<option
style="font-family: 'Liu Jian Mao Cao'; font-size: 13pt;"
value="'Liu Jian Mao Cao', cursive"
>Liu Jian Mao Cao (支持汉字)</option>
</select>
</div>
<div style="padding: 30px 20px;">or</div>
<div class="col">
<label for="font-file">Upload your handwriting font <small>(Beta) (<a href="#how-to-add-handwriting">Guide to create font from your handwriting</a>)</small></label>
<input type="file" id="font-file" />
<br>
</div>
</div>
<label for="ink-color">Pen Ink Color</label>
<select id="ink-color">
<option default value="#000F55">Blue</option>
<option value="#333">Black</option>
</select><br>
<div class="row responsive-row">
<div class="col">
<label for="font-size">Font Size</label><br>
<input type="number" min="0" value="12" id="font-size" /> pt
<br><br>
</div>
<div class="col">
<label for="top-padding">Vertical Position of Text</label><br>
<input type="number" min="0" value="0" id="top-padding" /> px
<br><br>
</div>
<div class="col">
<label for="word-spacing">Word Spacing</label><br>
<input type="number" min="0" value="3" id="word-spacing" /> px
<br><br>
</div>
</div>
<div class="row responsive-row">
<div class="col">
<label for="letter-spacing">Letter Spacing</label><br>
<input type="number" value="0" id="letter-spacing" /> pt
<br><br>
</div>
<div class="col">
<label for="paper-margin-toggle">Paper Margin</label>
<label class="switch-toggle outer">
<input id="paper-margin-toggle" type="checkbox" />
<div></div>
</label>
<br><br>
</div>
<div class="col">
<label for="paper-line-toggle">Paper Lines</label>
<label role="checkbox" class="switch-toggle outer">
<input id="paper-line-toggle" checked type="checkbox" />
<div></div>
</label>
<br /><br />
</div>
<div class="col">
<label for="paper-curve-toggle">Paper Curvature</label>
<label class="switch-toggle outer">
<input id="paper-curve-toggle" type="checkbox" />
<div></div>
</label>
</div>
</div>
<br/>
<button type="button" class="secondary-button" id="draw-diagram-button">Draw Diagram <small>(Beta)</small></button><br/><br/>
<button type="submit" class="primary-button" class="generate-image">Generate Image</button>
<button type="button" class="secondary-button" id="pdf-preview-button">Download as PDF <span style="background-color: #ccc;padding: 5px; color: #000;border-radius: 10px;font-size: 7pt;"><span id="image-count">0</span> Pages</span></button>
<br/><br/>
</form>
<!-- Editor -->
<div style="padding: 10px 0px;">
<label id="note-label" for="note">Type/Paste text here</label>
</div>
<div class="row output-grid responsive-row">
<div class="col">
<div class="page">
<div class="paper-margin-top-line" contenteditable="true" aria-multiline="true" aria-labelledby="note-label">
</div>
<div class="textarea row">
<div class="paper-margin-left-line"></div>
<div role="textbox" class="paper-content" id="note" contenteditable="true" aria-multiline="true" aria-labelledby="note-label" aria-required="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus dui eget tortor feugiat iaculis. Morbi et dolor in felis viverra efficitur. Integer id laoreet arcu. Mauris turpis nibh, scelerisque sed tristique non, hendrerit in erat. Duis interdum nisl risus, ac ultrices ipsum auctor at. Aliquam faucibus iaculis metus sit amet tincidunt. Vestibulum cursus urna vel nunc imperdiet suscipit. Ut eu augue egestas, porta orci lobortis, pharetra orci. Morbi eu tellus quis nisi tempor accumsan nec eu urna.
empor, ullamcorper tortor. Mauris quis fermentum augue. Phasellus ac nisl hendrerit, fringilla enim aliquam, placerat odio. Ut tortor nisi, pellentesque sed nisi at, hendrerit imperdiet turpis. Proin interdum porttitor metus at hendrerit. Proin ipsum nisl, lacinia vitae purus ullamcorper, maximus convallis sem. Sed nec lacinia lorem. Duis arcu metus, cursus non odio quis, tincidunt tempor augue. Donec eget vestibulum risus. Nullam blandit quis est vitae feugiat.
</div>
</div>
<div class="overlay"></div>
</div>
</div>
<div class="col output-container">
<div id="output" class="output"></div>
<div style="text-align: center;padding-top: 20px;">
<a class="blue-button download-button disabled hide-mobile">Download Image</a>
</div>
</div>
</div>
<br/><a class="blue-button download-button disabled hide-pc">Download Image</a> <br/>
</section>
<section class="guide" id="how-to-add-handwriting">
<h2>✨ How to add your own handwriting?</h2>
<ul>
<li>To use your handwriting, you will have to generate font of your handwriting.</li>
<li>There are websites like <a href="https://www.calligraphr.com/en/">Calligraphr</a> that let you do that.</li>
<li>Once you get .ttf file of your handwriting, upload it from upload button and boom! You will have your handwriting in the image.</li>
</ul>
</section>
<section class="dependencies" style="margin-top: 60px;">
<h2>🤗 Sponsor Links</h2>
<p style="padding: 20px 5px;">
<a href="https://www.patreon.com/bePatron?u=31891872"><img alt="Buy me a Coffee Button" width=200 src="https://c5.patreon.com/external/logo/become_a_patron_button.png"></a>
<a href="https://www.buymeacoffee.com/saurabhdaware"><img alt="Buy me a Coffee Button" width=200 src="https://cdn.buymeacoffee.com/buttons/default-yellow.png"></a>
</p>
</section>
<section class="contributors" style="margin-top: 60px;">
<h2>👫 GitHub Contributors</h2>
<div class="project-contributors" id="project-contributors">
</div>
<div style="padding: 20px 5px;">
Want to contribute as well? Check out <a href="https://github.com/saurabhdaware/text-to-handwriting/blob/master/CONTRIBUTING.md">CONTRIBUTING.md on GitHub</a>
</div>
</section>
<!-- GitHub Corner logo -->
<a href="https://github.com/saurabhdaware/text-to-handwriting" rel="noopener noreferrer" target="_blank" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a>
</main>
<img alt="placeholder image element to hold image tag for warped image, invisible." id="warped-image" />
<footer style="background-color: #222; color: #ddd;padding: 24px 30px; text-align: right;font-weight: bold;">
© <span id="year"></span> <a style="text-decoration: none; color: #ddd;" href="https://saurabhdaware.in">Saurabh Daware 🌻</a>
</footer>
<!-- Fixed Elements -->
<section class="draw-container popup-container">
<button class="close-button">×</button>
<div class="row responsive-row">
<canvas id="diagram-canvas" style="background-color: #fff;" height="300px" width="600px"></canvas>
<div class="col buttons-container">
<button class="blue-button" id="add-to-paper-button">Add to Paper</button>
<button class="blue-button" id="draw-download-button">Download Image</button>
<br>
<input type="file" id="image-to-add-in-canvas" accept="image/x-png,image/gif,image/jpeg" hidden="hidden">
<button class="blue-button" id="add-new-image-button">Add bg image</button>
<br/><br/>
<button id="clear-draw-canvas" class="blue-button" style="background-color: #f30;">Clear Canvas</button>
</div>
</div>
</section>
<section class="pdf-preview-container popup-container">
<button class="close-button">×</button>
<div class="row responsive-row">
<div class="preview-holder">
<div class="preview-image image-1">
<button class="close-image">×</button>
<img src="images/apple-touch-icon.png">
</div>
</div>
<div class="col buttons-container">
<button id="generate-pdf" class="blue-button">Download PDF</button>
</div>
</div>
</section>
<script defer src="./lib/html2canvas.min.js" crossorigin="anonymous"></script>
<script defer src="./js/app.mjs" type="module" crossorigin="anonymous"></script>
<script src="https://unpkg.com/jspdf@^1/dist/jspdf.min.js"></script>
</body>
</html>