title: how to convert multiple div into image (png/jpeg) using php and javascript?
body: <p>How can I convert multiple dynamic div (created at runtime) into image. There are more than 50 div which are created at runtime using php array. I just want all those div to be converted to image seperately.</p>
  
  <p>Here is the code I tried for -</p>
  
  <pre><code>&lt;?php 
  $names = [" ", "abc", "def", "ghi yfg", "jkl", "mno"];
  $i=1;
  foreach ($names as $name ) { 
  ?&gt;
  &lt;div class='mydivCls' id="mydiv&lt;?php echo $i?&gt;"&gt;
      &lt;p id="mytext"&gt;&lt;?php echo $name ?&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;?php $i++; } ?&gt;
  
  
  &lt;div id="canvas" style="display:none;"&gt;
  &lt;p&gt;Canvas:&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="image"&gt;
      &lt;p&gt;Image:&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Css code --</p>
  
  <pre><code>&lt;style&gt;
      @font-face {
          font-family:roboto;
          src: url("/roboto/Roboto-Medium.ttf")
      }
      .mydivCls {
          background-image: url("1.png");
          width: 325px;
          height: 207px;
      }
      .mydivCls p {
          font-family: roboto;
          padding-top: 100px;
          text-align: center;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>And here is my script --</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://html2canvas.hertzen.com/build/html2canvas.js"&gt;&lt;/script&gt;
  &lt;script&gt;
          var i=1;
          $(".mydivCls").each (function(){
              html2canvas([document.getElementById('mydiv'+i)], {
                  onrendered: function (canvas) {
                      document.getElementById('canvas').appendChild(canvas);
                      var data = canvas.toDataURL('image/png');
  
                      var image = new Image();
                      image.src = data;
                      document.getElementById('image').appendChild(image);
                  }
              });
              i++;
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm getting following error in my console -- </p>
  
  <pre><code>TypeError: document.getElementById(...) is null
  document.getElementById('canvas'+i).appendChild(canvas);
  </code></pre>