使用jQuery或PHP或转换格到PDF制作当前画面的正确的图像捕获使用jQuery或PHP或转换格

我写为SVG转换为内联SVG和采取的div截图一些代码。 请检查。请复制此代码INT到本地主机并进行测试。 由于屏幕截图是在不同的宽度不同。

https://jsfiddle.net/7bqukhff/15/

 <link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

<div id="test">
    <div class="description-div">

    <p>Sample description</p>

    </div>



      <div class="img-div" id="img-div"></div>


</div>

 <form class="cf">
      <div class="half left cf">
        <input type="text"  name="user-name" required>
         <select name="design-name" class="desgign-class" required>
             <option value="" >select</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
         </select> 
        <input type="submit" name="submit" value="submit" class="submit"> 

      </div>

   </form>


</div>
<div class="new">
 <a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
</div>
<script>
$(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<op;i++){
                $('.img-div').append("<img src='https://istack.000webhostapp.com/1tf.svg'>");
             } 
    }

    if(op==3){
              for(var i = 0;i<op;i++){
                 $('.img-div').append("<img src='https://istack.000webhostapp.com/_1tf.svg'>");
              }
    }

      if(op==4){
              for(var i = 0;i<op;i++){
                 $('.img-div').append("<img src='http://svgur.com//i/1yP.svg'>");
              }
    }

    }

    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);

});



</script>

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;
   &:focus {
      @include box-shadow(0 0px 2px rgba($red, 1)!important);
   }
}

#input-submit {
   color: white;
   background: $red;
   cursor: pointer;
   &:hover {
      @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
   }
}

但在这里（1）当我需要的屏幕截图img-div的截图是从原始表示不同。 为什么会发生？

（2）此外，在选项4截图SVG并未显示。 其实我有太多的选择，太多的图像。 现在我只写3个选项。

（3）是否有可能在这个屏幕截图保存到服务器[特定文件夹]当用户提交表单？

（4）是否存在，而无需使用HTML画布任何其他方法？

（5）像电脑如何截屏OPTION作品？ 或浏览器扩展类似https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en 。

https://www.youtube.com/watch?v=3766n-SDPNc&feature=youtu.be

简称：我有一个网站。 其中用户可以选择从给定的SVG列表中的任何SVG。 当用户选择一个SVG则该SVG被转换成在一个DIV显示联SVG。 还用户可以该SVG移动到div的任何部分。 一切后，然后用户将填补表格并提交。 在时间提交我们要下载的该截屏DIV然后我们理解用户选择的颜色，其中SVG IMGE是地方等

Answer 1:

请检查下面提及的解决方案。 我只是试图掩盖您的问题。

 $(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<op;i++){ $('.img-div').append("<img src='https://istack.000webhostapp.com/1tf.svg'>"); } } if(op==3){ for(var i = 0;i<op;i++){ $('.img-div').append("<img src='https://istack.000webhostapp.com/_1tf.svg'>"); } } if(op==4){ for(var i = 0;i<op;i++){ $('.img-div').append("<img src='http://svgur.com//i/1yP.svg'>"); } } } 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'); var sleft = 0; svgs.forEach(function(svg) { var svgWidth = svg.width.baseVal.value; var svgHeight = svg.height.baseVal.value; var svgLeft = 10; var svgTop = getOffset(svg).top - 40; 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); }); 

 @import url(https://fonts.googleapis.com/css?family=Merriweather); $red: #e74c3c; *, *:before, *:after { @include box-sizing(border-box); } html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; @include text-shadow(1px 1px 0 rgba(white, 1)); } 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; &:focus { @include box-shadow(0 0px 2px rgba($red, 1)!important); } } #input-submit { color: white; background: $red; cursor: pointer; &:hover { @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6)); } } textarea { height: 126px; } } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } /* Clearfix */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } .half.left.cf > input { margin: 5px; } @media print { html, body { padding:0 !important;margin:0 !important; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="test"> <div class="description-div"> <p>Sample description</p> </div> <div class="img-div" id="img-div"></div> </div> <form class="cf"> <div class="half left cf"> <input type="text" name="user-name" required> <select name="design-name" class="desgign-class" required> <option value="" >select</option> <option>2</option> <option>3</option> <option>4</option> </select> <input type="submit" name="submit" value="submit" class="submit"> </div> </form> </div> <div class="new"> <a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a> </div> 

Answer 2:

据我所知，这是一个工作版本： https://jsfiddle.net/7bqukhff/16/

所不同的是来自您绘制到的方式offscreenCanvas 。

下面是你的代码会发生什么：

1. 您正在设置的尺寸offscreenCanvas到SVG（而不是包装的宽度和高度）的宽度和高度中的行108及109
2. 你减去从SVG的左边和顶部位置的东西（40和62）。 该位置指的是网页，而不是包装中的SVG的相对位置上的位置。
3. 您绘制SVG到与画布页坐标，而不是相对坐标

此修复程序是这样的：

首先，设置画布包装的尺寸尺寸：

var wrapperRect = wrapper.getBoundingClientRect()
// ...
offScreenCanvas.width = wrapperRect.width;
offScreenCanvas.height = wrapperRect.height;

然后，使用相对坐标绘制SVG：

var svgLeft = getOffset(svg).left - wrapper.left;
var svgTop = getOffset(svg).top - wrapper.top;

这似乎是你需要的工作。

PS：选项“4”不工作，但在使用HTTP上的HTTPS网站是由于它，所以它不是由于安全限制加载。

文章来源: Making a proper image capture of Current screen using jquery Or PHP or Convert div to pdf