title: Making a proper image capture of Current screen using jquery Or PHP or Convert div to pdf
body: <p>I write some code for to convert svg to inline svg and take screenshot of that div . Please check .Please copy this code int to your local host and test it . Because screen shot is different in different width . </p>
  
  <p><a href="https://jsfiddle.net/7bqukhff/15/" rel="nofollow noreferrer">https://jsfiddle.net/7bqukhff/15/</a></p>
  
  <pre><code> &lt;link href="style.css" rel="stylesheet"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrapper"&gt;
  
  &lt;div id="test"&gt;
      &lt;div class="description-div"&gt;
  
      &lt;p&gt;Sample description&lt;/p&gt;
  
      &lt;/div&gt;
  
  
  
        &lt;div class="img-div" id="img-div"&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;
  
   &lt;form class="cf"&gt;
        &lt;div class="half left cf"&gt;
          &lt;input type="text"  name="user-name" required&gt;
           &lt;select name="design-name" class="desgign-class" required&gt;
               &lt;option value="" &gt;select&lt;/option&gt;
               &lt;option&gt;2&lt;/option&gt;
               &lt;option&gt;3&lt;/option&gt;
               &lt;option&gt;4&lt;/option&gt;
           &lt;/select&gt; 
          &lt;input type="submit" name="submit" value="submit" class="submit"&gt; 
  
        &lt;/div&gt;
  
     &lt;/form&gt;
  
  
  &lt;/div&gt;
  &lt;div class="new"&gt;
   &lt;a class="btn btn-success" href="javascript:void(0);" onclick="generate();"&gt;Generate Screenshot »&lt;/a&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $(function() {
  
  $(".desgign-class").on("change",function(){
  
   var op=$(this).val();
  
    if(op!=0){
    $('.btn').show();
    $('.img-div').html('');
    if(op==2){
               for(var i = 0;i&lt;op;i++){
                  $('.img-div').append("&lt;img src='https://istack.000webhostapp.com/1tf.svg'&gt;");
               } 
      }
  
      if(op==3){
                for(var i = 0;i&lt;op;i++){
                   $('.img-div').append("&lt;img src='https://istack.000webhostapp.com/_1tf.svg'&gt;");
                }
      }
  
        if(op==4){
                for(var i = 0;i&lt;op;i++){
                   $('.img-div').append("&lt;img src='http://svgur.com//i/1yP.svg'&gt;");
                }
      }
  
      }
  
      else{
      $('.btn').hide();
      }
  
       $('img').each(function() {
  
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');
  
        jQuery.get(imgURL, function(data) {
           // Get the SVG tag, ignore the rest
           var $svg = jQuery(data).find('svg');
  
           // Add replaced image's ID to the new SVG
           if (typeof imgID !== 'undefined') {
              $svg = $svg.attr('id', imgID);
           }
           // Add replaced image's classes to the new SVG
           if (typeof imgClass !== 'undefined') {
              $svg = $svg.attr('class', imgClass + ' replaced-svg');
           }
           // Remove any invalid XML tags as per http://validator.w3.org
           $svg = $svg.removeAttr('xmlns:a');
  
           // Replace image with new SVG
           $img.replaceWith($svg);
  
        }, 'xml');
  
     });
  });
  
  (function(exports) {
     function urlsToAbsolute(nodeList) {
        if (!nodeList.length) {
           return [];
        }
        var attrName = 'href';
        if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
           attrName = 'src';
        }
        nodeList = [].map.call(nodeList, function(el, i) {
           var attr = el.getAttribute(attrName);
           if (!attr) {
              return;
           }
           var absURL = /^(https?|data):/i.test(attr);
           if (absURL) {
              return el;
           } else {
              return el;
           }
        });
        return nodeList;
     }
  
     function screenshotPage() {
        var wrapper = document.getElementById('img-div');
        html2canvas(wrapper, {
           onrendered: function(canvas) {
              function getOffset(el) {
                 el = el.getBoundingClientRect();
                 return {
                    left: el.left + window.scrollX,
                    top: el.top + window.scrollY
                 }
              }
              var cachedCanvas = canvas;
              var ctx = canvas.getContext('2d');
              var svgs = document.querySelectorAll('svg');
              svgs.forEach(function(svg) {
                 var svgWidth = svg.width.baseVal.value;
                 var svgHeight = svg.height.baseVal.value;
                 var svgLeft = getOffset(svg).left - 40;
                 var svgTop = getOffset(svg).top - 62;
                 var offScreenCanvas = document.createElement('canvas');
                 offScreenCanvas.width = svgWidth;
                 offScreenCanvas.height = svgHeight;
                 canvg(offScreenCanvas, svg.outerHTML);
                 ctx.drawImage(cachedCanvas, 0, 0);
                 ctx.drawImage(offScreenCanvas, svgLeft, svgTop);
              });
              canvas.toBlob(function(blob) {
                 saveAs(blob, 'myScreenshot.png');
              });
           }
        });
     }
  
     function addOnPageLoad_() {
        window.addEventListener('DOMContentLoaded', function(e) {
           var scrollX = document.documentElement.dataset.scrollX || 0;
           var scrollY = document.documentElement.dataset.scrollY || 0;
           window.scrollTo(scrollX, scrollY);
        });
     }
  
     function generate() {
        screenshotPage();
     }
     exports.screenshotPage = screenshotPage;
     exports.generate = generate;
  })(window);
  
  });
  
  
  
  &lt;/script&gt;
  
  html,
  body {
     background: #f1f1f1;
     font-family: 'Merriweather', sans-serif;
     padding: 1em;
  }
  
  
  form {
      border: 2px solid blue;
      float: left;
      max-width: 300px;
      padding: 5px;
      text-align: center;
      width: 30%;
  }
  
  .img-div {
      border: 1px solid black;
      display: block;
      float: left;
      margin-right: 86px;
      overflow: hidden;
      width: 50%;
      padding: 10px;
  }
  .btn {
      display: none;
      overflow: hidden;
      width: 100%;
  }
  .new{
       display: block;
      overflow: hidden;
      width: 100%;
  }
  
  .description-div {
      border: 2px solid green;
      float: left;
      margin-right: 32px;
      padding: 3px;
      width: 13%;
  }
  
  .submit {
      background: wheat none repeat scroll 0 0;
      border: 1px solid red;
      cursor: pointer;
  }
  
  input,
  textarea {
     border: 0;
     outline: 0;
     padding: 1em;
     @include border-radius(8px);
     display: block;
     width: 100%;
     margin-top: 1em;
     font-family: 'Merriweather', sans-serif;
     @include box-shadow(0 1px 1px rgba(black, 0.1));
     resize: none;
     &amp;:focus {
        @include box-shadow(0 0px 2px rgba($red, 1)!important);
     }
  }
  
  #input-submit {
     color: white;
     background: $red;
     cursor: pointer;
     &amp;:hover {
        @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
     }
  }
  </code></pre>
  
  <p>But here <strong>(1)</strong> when i take screen shot of <code>img-div</code> the screenshot is different from original representation.   Why it happen ?</p>
  
  <p><strong>(2)</strong> Also in option 4 screenshot the svg is not appearing  . Actually i have too many option and too many images . Now i only write 3 options .</p>
  
  <p><strong>(3)</strong> Is it possible for to save this screen shot to server[specific folder] when user submitting the form ? </p>
  
  <p><strong>(4)</strong> Is there any other method without using html canvas ? </p>
  
  <p><strong>(5)</strong> LIKE HOW SCREEN SHOT OPTION IN COMPUTER WORKS ? or browser extension like <a href="https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en" rel="nofollow noreferrer">https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en</a> . </p>
  
  <p><a href="https://www.youtube.com/watch?v=3766n-SDPNc&amp;feature=youtu.be" rel="nofollow noreferrer">https://www.youtube.com/watch?v=3766n-SDPNc&amp;feature=youtu.be</a></p>
  
  <blockquote>
    <p>Short form : i have a website . In which user can select any svg from
    the given svg list . When user select one svg then that svg is
    converted to inline svg  displayed in one div . Also user can move
    that svg to any portion of the div . After everything then user will
    fill a form and submit . At the time of submit we want to download the
    screen shot of that div then we understand user select which colour ,
    where the svg imge is place etc</p>
  </blockquote>