Convert div to image using html2canvas and save it using Ajax, PHP.

Sometime you need to convert your entire div to image.

Here i am going to use https://html2canvas.hertzen.com/.

1.For example i have HTML like below:

2.Now you have to include jquery and html2canvas.js.

You can also download html2canvas.js.

3.Now add below script to convert your entire div to image.

4.save_image.php

Full Code

save_image.php

Freud term paper writing service propounded with the relational self?

Gaurav Kumar

Hi, my name is Gaurav Kumar and I specialize in Computer Software industry. I have been working as a Software Developer from last 3+ years,and its my passion to learn new technology and sharing what I've learned.

  • Vincent Pieplu

    Bonjour,

    Ca fonctionne presque parfaitement. Le souci, c’est si la DIV n’est pas complètement visible à l’écran, l’image créée sera coupée, ce qui est très embêtant.

    Comment pourrait on faire ?

    Merci

  • Vincent Pieplu

    Hello,

    It works almost perfectly. The concern is if the DIV is not completely visible on the screen, the created image will be cut , which is very annoying.

    How could we do?

    Thank you

  • Adnan Afzal

    Thank you. It really helped.

    • Pravakar

      hi can you help me with this codes?

      • Adnan Afzal

        Yes sure. Can you send me screenshot of your error ?

        • Pravakar
          • Pravakar
          • Adnan Afzal

            Have you changed the $imageurl variable according to your site ?

          • Pravakar

            hi I have changed and its working fine but when i put large number of loops than blank image is generated. Can i put some kind of time interval while using large number of loops.

          • Adnan Afzal

            Hi. Where have you added the loop ? Can you share your code.

          • Pravakar

            for (var i=1; i<'’; i++){
            html2canvas([document.getElementById(‘dif’+ i +”)], {
            onrendered: function (canvas) {
            var imagedata = canvas.toDataURL(‘image/png’);
            var imgdata = imagedata.replace(/^data:image/(png|jpg);base64,/, “”);
            //ajax call to save image inside folder
            $.ajax({
            url: ‘save_image.php’,
            data: {
            imgdata:imgdata
            },

            type: ‘post’,
            success: function (response) {
            console.log(response);
            $(‘#image_id img’).attr(‘src’, response);

            }

            });
            }
            });
            }

          • Pravakar

            i value is compared with a php variable comparision. but as the php variable goes beyond 30 it saves blank image

          • Adnan Afzal

            You can create an array in JS and pass it as the first parameter of html2canvas().
            For example,
            /* code */
            var arr = [];
            var divs = document.getElementsByClassName(“.div”);
            for (var a = 0; a < divs.length; a++) {
            arr.push(divs[a]);
            }
            html2canvas(arr, {
            onrendered: function(canvas) {
            //
            }
            });

            let me know if you need more help.

          • Adnan Afzal

            And NO, the time interval is not an enough sufficient solution.

          • Pravakar

            i didn’t get it you are using get element by class for all divs but where to specify the particular div whose image is to be captured.

  • Pravakar

    Hi I copied the exact code in my local host but it didn’t worked. I am new so can you help me.

  • Kimelidaniel

    Thank you so much, i spent the entire night trying to find something like this.

  • Ritik Rastogi

    hey i new in php ,
    i want similar type of code.i want to take a snapshot of a specific portion of image and save it into database so can you help me to do the same.

    Ritik Rastogi
    7767924665

    • Hello Ritik,

      This script is for convert your html to image, as you said you want specific portion of image for this i think you need to crop your image or you may try another way.