{% extends 'main_index.html' %}
{% block MDesc %}
You can convert your own text to image format and it's too useful and ease to use.You have to only write the text and
you can also edit text if you want.
any text
{% endblock %}
{% block MKW %}Text to image, text characters to image, Text to image generator, convert text to image, Generate image
from text, save text as image, styled text to image, Numbers to image{% endblock %}
{% block Mr %}
24/09/2021
{% endblock %}
{% block MAut %}
Amar khamkar
{% endblock %}
{% block title %} text to image converter - Convert text to image online
{% endblock %}
{% block body %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<style>
    .custom-range::-webkit-slider-runnable-track {
        background-color: #343a40;
        /* Dark grey background color */
        height: 4px;
        /* Adjust the height of the track */
    }

    .custom-range::-webkit-slider-thumb {
        background-color: #fff;
        /* White thumb color */
        border: 1px solid #6c757d;
        /* Optional: Add a border around the thumb */
        height: 16px;
        /* Adjust the height of the thumb */
        width: 16px;
        /* Adjust the width of the thumb */
        margin-top: -6px;
        /* Adjust the vertical position of the thumb */
    }

    /* Optional: Adjust the color when the thumb is being dragged */
    .custom-range::-moz-range-thumb {
        background-color: #fff;
        /* White thumb color */
        border: 1px solid #6c757d;
        /* Optional: Add a border around the thumb */
        height: 16px;
        /* Adjust the height of the thumb */
        width: 16px;
        /* Adjust the width of the thumb */
        margin-top: -6px;
        /* Adjust the vertical position of the thumb */
    }

    /* Optional: Adjust the color when the thumb is being dragged */
    .custom-range::-ms-thumb {
        background-color: #fff;
        /* White thumb color */
        border: 1px solid #6c757d;
        /* Optional: Add a border around the thumb */
        height: 16px;
        /* Adjust the height of the thumb */
        width: 16px;
        /* Adjust the width of the thumb */
        margin-top: -6px;
        /* Adjust the vertical position of the thumb */
    }

    #c {
        border: 2px solid rgb(66, 66, 66);
        top: 22px;
        left: 0px;
    }

    .select {
        color: white;
        background-color: #191717;
        border: 3px solid black;
        border-radius: 15px;
    }

    .palet {
        width: 25px;
        height: 25px;
    }
</style>
<div class="container text-light">
    <div class="row">
        <div class="col-md-7 my-3"
            style="background-color: rgb(30, 30, 30); box-shadow: 13px 4px 19px 7px rgb(19 17 17);">
            <div class="my-4">
                <h1>text to image converter</h1>
                <hr class="my-4 bg-dark">
                <h3 class="text-monospace my-2">text to image?</h3>
                <p class="text-monospace my-4">Text to Image converter helps you to convert your own written text into an image format where it processes your text and creates a respected image from text. 
                You can also check our <a href="/Analyzer/image-to-text-converter/">Image to text converter</a>
                <br><br>
                Want to edit more than text? Try our online <a href="https://draw.calcont.in/" target="_blank">whiteboard</a>
                </p>

                <hr class="bg-dark my-2">
                <h3 class="my-4 mb-4 text-monospace text-center">text to image converter</h3>
                <div class="container" style="border: 3px solid #2b2929; border-radius: 10px;">
                    <section class="main my-5" style="display: flex; justify-content: center;">
                        <canvas id="c" style="max-width: 100%;"></canvas>
                    </section>
                    <p class="lead font-weight-bold text-center">Edit👇</p>
                    <div class="edit my-4">
                        <div class="row">
                            <div class="col-md">
                                <label class="visually-hidden" for="autoSizingSelect">Font</label>
                                <select class="form-control select" id="font-family">
                                    <option class=" select" value="arial">Arial</option>
                                    <option class="select" value="helvetica" selected>Helvetica</option>
                                    <option class="select" value="myriad pro">Myriad Pro</option>
                                    <option class="select" value="delicious">Delicious</option>
                                    <option class="select" value="times new roman">Times new roman</option>
                                    <option class="select" value="verdana">Verdana</option>
                                    <option class="select" value="georgia">Georgia</option>
                                    <option class="select" value="courier">Courier</option>
                                    <option class="select" value="comic sans ms">Comic Sans MS</option>
                                    <option class="select" value="impact">Impact</option>
                                    <option class="select" value="monaco">Monaco</option>
                                    <option class="select" value="optima">Optima</option>
                                    <option class="select" value="hoefler text">Hoefler Text</option>
                                    <option class="select" value="plaster">Plaster</option>
                                    <option class="select" value="engagement">Engagement</option>
                                </select>
                            </div>
                            <div class="col-md ">
                                <label for="text-align" style="display:inline-block">Text align:</label>
                                <select id="text-align" class="form-control select">
                                    <option class="select" value="left">Left</option>
                                    <option class="select" value="center">Center</option>
                                    <option class="select" value="right">Right</option>
                                    <option class="select" value="justify">Justify</option>
                                </select>
                            </div>
                            <div class="col-md my-2">
                                <label for="customRange1">Font Size</label>
                                <input type="range" class="custom-range" value="50" min="1" max="120" step="1"
                                    id="text-font-size">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 my-3">
                                <div class="my-2">
                                    <input type="color" class="palet" value="" id="text-color">
                                    <label for="customRange1">Text color</label>
                                </div>
                                <div class="my-2">
                                    <input type="color" class="palet" value="" id="canvas-bg-color">
                                    <label for="customRange1">Background color</label>
                                </div>
                                <div class="my-2">
                                    <input type="color" class="palet" value="" id="text-lines-bg-color">
                                    <label for="customRange1">Background text color </label>
                                </div>
                                <div class="my-2">
                                    <input type="color" class="palet" value="" id="text-stroke-color">
                                    <label for="customRange1">stroke color </label>
                                </div>
                            </div>
                            <div class="col-md-6 my-3">
                                <div class="my-2">
                                    <label for="text-stroke-width">Stroke width</label>
                                    <input type="range" class="custom-range" value="1" min="1" max="5" step="1"
                                        id="text-stroke-width">

                                </div>
                                <div class="custom-control custom-checkbox my-2">
                                    <input type="checkbox" class="custom-control-input" id="transparent-bg">
                                    <label class="custom-control-label" for="transparent-bg" >Transparent
                                        background</label>
                                </div>
                                <div class="my-2">
                                    <label for="text-stroke-width">Line Height</label>
                                    <input type="range" class="custom-range" value="1" min="0" max="10" step="0.1"
                                        id="text-line-height">
                                </div>
                            </div>
                        </div>
                        <div id="text-controls-additional" class="row mx-auto">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name='fonttype' id="text-cmd-bold">
                                <label class="custom-control-label" for="text-cmd-bold">Bold</label>
                            </div>
                            <div class="custom-control custom-checkbox mx-2">
                                <input type="checkbox" class="custom-control-input" name='fonttype'
                                    id="text-cmd-italic">
                                <label class="custom-control-label" for="text-cmd-italic">Italic</label>
                            </div>
                            <div class="custom-control custom-checkbox mx-2">
                                <input type="checkbox" class="custom-control-input" name='fonttype'
                                    id="text-cmd-underline">
                                <label class="custom-control-label" for="text-cmd-underline">Underline</label>
                            </div>
                            <div class="custom-control custom-checkbox mx-2">
                                <input type="checkbox" class="custom-control-input" name='fonttype'
                                    id="text-cmd-overline">
                                <label class="custom-control-label" for="text-cmd-overline">Overline</label>
                            </div>
                            <div class="custom-control custom-checkbox mx-2">
                                <input type="checkbox" class="custom-control-input" name='fonttype'
                                    id="text-cmd-linethrough">
                                <label class="custom-control-label" name='fonttype'
                                    for="text-cmd-linethrough">Linethrough</label>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-start my-2">
                        <a class=" btn btn-outline-secondary text-light" id="link" href="" download>
                            <img src="/static/file_download.svg" width="20" height="20" alt=""> Download
                        </a>
                        <a class=" mx-2 btn btn-outline-secondary text-light" id="reset" href="">
                            Reset
                        </a>
                    </div>
                </div>

            </div>
            <hr class="my-4 bg-dark">
            <h3 class="text-monospace my-2">text to image converter in CalConT?</h3>
            <p class="text-monospace my-4">
                So, to use this tool in calcont,
                <br>
                1. First, you have to write or paste the text on textarea.
                <br>
                2. Then image will be automatically generated you don't have to press any button over here. All the
                process will be done on runtime.
                <br>
                3. Also, you can edit your image by provided options and then finally you can download the generated
                image.
            </p>
            <hr class="my-4 bg-dark">
            <h3 class="text-monospace my-4">Use of tool?</h3>
            <p class="my-4">
                There are a lot of applications like,
            <p>
            <p class="my-2">1. It can be used as small photo editing software.</p>
            <p class="my-2">2. Can be used as a quote, poetry generator.</p>
            <p class="my-2">3. Useful to create documents.</p>
            </p>
            </p>
        </div>
        <div class="col-md-4 my-4">
            <div class="col my-3 p-4 d-flex flex-column position-static"
                style="background-color: rgb(30, 30, 30); box-shadow: 13px 4px 19px 7px rgb(19 17 17);">
                <h4 class="my-2">Analyzers</h3>
                    {% for link in link_string1 %}
                    <li class="my-2"><a href="{{link.0}}">{{link.1}}</a></li>
                    {% endfor %}
            </div>
            <div class="col p-4 d-flex flex-column position-static"
                style="background-color: rgb(30, 30, 30); box-shadow: 13px 4px 19px 7px rgb(19 17 17);">
                <h4 class="my-2">Translators</h3>
                    {% for link in link_string2 %}
                    <li class="my-2"><a href="{{link.0}}">{{link.1}}</a></li>
                    {% endfor %}
            </div>
        </div>
    </div>
</div>


<script src="/static/js/textAnalyzers/textToImage.js">
</script>
{% endblock %}