代码拉取完成，页面将自动刷新
<!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 href="https://fonts.googleapis.com/css?family=Caveat|Homemade+Apple|Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">
<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 value="'Homemade Apple', cursive">Homemade Apple</option>
<option value="'Caveat', cursive">Caveat</option>
<option 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>
<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="generate-pdf">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 class="row output-grid responsive-row">
<div class="col">
<div class="page">
<div class="paper-margin-top-line" contenteditable="true">
</div>
<div class="textarea row">
<div class="paper-margin-left-line"></div>
<div role="textbox" class="paper-content" id="note" contenteditable="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="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">CONTRUBUTING.md on GitHub</a>
</div>
</section>
</main>
<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">
<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" style="border: none;">Add to Paper</button>
<button class="blue-button" id="draw-download-button" style="border: none;">Download Image</button>
<br/><br/>
<button id="clear-draw-canvas" class="blue-button" style="border: none;background-color: #f30;">Clear Canvas</button>
</div>
</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>
<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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手