How to Generate Image from html using js?
  • Custom Html To Image
  • Html To Image
  • Html To Png
  • Image Generate using Php And Javascript

72 Replies

This tutorial about generating the image from the HTML. You can just create the HTML and put this code after your code and it will generate the image from your HTML. below is the easy step to generate the image from custom HTML.

Step 1)

Create one php file like index.php as below

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html To Image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"> </script>
<div class="bingo-box bingo-green generatedata" id="generatedata1" data-id="1">
<div class="number-row number-row1">
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number5">9</div>
</div>
</div>
<script>
        $(document).ready(function() {
            var getCanvas;
            $( ".generatedata" ).each(function( index ) {
                var dataid = $( this ).attr("id");
                var catid = $( this ).data("id");
                var datafid = parseInt(index) + parseInt(1);
                var element = $("#"+dataid);
                html2canvas(element, {
                    onrendered: function(canvas) {
                        getCanvas = canvas;
                        var imgageData = getCanvas.toDataURL("image/png");
                        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                        $.ajax({
                          type: "POST",
                          url: "upload.php",
                          data: {
                             imgBase64: newData
                          }
                        }).done(function(o) {
                          console.log('saved');
                        });
                    }
                });
            });
        });
    </script>

Step 2)

Create another page like upload.php

<?php
$catid = $_POST['catid'];
$folderPath = "upload_img/";
$image_parts = explode(";base64,", $_POST['imgBase64']);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$filename = uniqid() . '.png';
$file = $folderPath . $filename;
file_put_contents($file, $image_base64);
?>

Step 3)

Now Just run index.php file to your browser this will generate the image in folder.

72 thoughts on “How to Generate Image from html using js?”

  8. game online

    I like the valuable info you provide in your articles. I will bookmark your weblog and check again here frequently. I am quite sure I will learn lots of new stuff right here! Best of luck for the next! Ediva Si Belden

    Reply ↓
  10. derma prime plus reviews

    Can I just say what a relief to discover a person that
    genuinely knows what they are talking about
    online. You actually understand how to bring a problem to light and make
    it important. A lot more people must read this and understand this side of the story.
    I can’t believe you aren’t more popular since you certainly have the gift.

    Reply ↓
  11. derma prime plus reviews

    I like the helpful information you supply for
    your articles. I will bookmark your weblog and check again here regularly.
    I am slightly certain I will be told lots of new stuff
    right right here! Best of luck for the next!

    Reply ↓
  12. derma prime plus reviews

    What i don’t realize is in reality how you
    are no longer really much more smartly-preferred
    than you may be right now. You are so intelligent. You realize therefore considerably on the subject of this
    topic, produced me in my view imagine it from numerous varied angles.
    Its Your own stuffs excellent.

    Reply ↓
  18. Tara

    Pretty great post. I just stumbled
    upon your weblog and wished to say
    that I’ve really enjoyed browsing your blog
    posts. After all I’ll be subscribing to your feed and I hope
    you write once more very soon!

    Reply ↓
  22. katalog firm

    Hiya very nice site!! Guy .. Beautiful .. Amazing .. I will bookmark
    your blog and take the feeds also? I am happy to find numerous useful information here within the publish, we need work out extra techniques in this regard, thanks for
    sharing. . . . . .

    Reply ↓
  23. goddess fiona

    I’m impressed, I have to admit. Rarely do I come across a
    blog that’s both educative and entertaining, and let
    me tell you, you’ve hit the nail on the head. The issue is
    an issue that too few men and women are speaking intelligently about.
    Now i’m very happy I stumbled across this in my search for something relating to this.

    Reply ↓
  24. sexmex

    Thank you for another wonderful article. The place else could anyone get
    that type of information in such a perfect method of
    writing? I’ve a presentation subsequent week, and I’m on the search
    for such information.

    Reply ↓
  25. tara tainton

    Wow, wonderful blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your website is excellent,
    let alone the content!

    Reply ↓
  26. news blog

    This is the perfect web site for anyone who would like to find out about this topic.

    You realize so much its almost hard to argue with you (not that I really would want to…HaHa).
    You certainly put a new spin on a topic that’s been written about for ages.
    Wonderful stuff, just excellent!

    Reply ↓
  30. Rafaela

    That is a really good tip especially to those fresh to the blogosphere.
    Simple but very precise information… Appreciate your sharing this one.
    A must read article!

    Reply ↓
  31. bp77 login

    I’m pretty pleased to discover this web site.
    I want to to thank you for ones time just for this fantastic read!!
    I definitely liked every bit of it and i also have you saved as a favorite to see
    new information in your web site.

    Reply ↓
    1. admin Post author

      Hi vidapaxton,

      Sorry, We have not any twitter account. we will shortly provide new feature in the website where you can subscribe for new posts.

      Thanks For Your Comment. Your Feedback Encourages Us.

      Reply ↓
  35. udintogel

    Wow, this blog is like a fantastic adventure hurtling into the universe of joy! 💫 The engaging content here is a thrilling rollercoaster ride for the imagination, sparking interest every time. 💫 Whether it’s inspiration, this blog is a treasure trove of inspiring insights! #MindBlown Plunge into this thrilling experience of discovery and let your imagination wander! 🚀 Don’t just explore, experience the excitement! 🌈 Your mind will be grateful for this delightful journey through a wondrous realm of wonder! 🚀

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *