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

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.


Full Code


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


    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 ?


  • Vincent Pieplu


    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
            url: ‘save_image.php’,
            data: {

            type: ‘post’,
            success: function (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++) {
            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

    • 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.