jquery - plugin - Capture div que contiene svg en línea y descárguelo como imagen

tooltip div jquery

Question

Escribí código para capturar una captura de pantalla de una página usando html5. Todo está bien excepto cuando la página contiene un svg. Cuando convierto svg en svg en línea después de que la captura de pantalla no captura la svg en línea.

Por favor, consulte https://jsfiddle.net/7bqukhff/4/

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.svg.js"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper">
   <h1>Scrrenshot</h1>
   <div class="img-div"><img src=''https://istack.000webhostapp.com/1tf.svg''></div>
   <form class="cf">
      <div class="half left cf">
         <input type="text" id="input-name" placeholder="Name">
         <input type="email" id="input-email" placeholder="Email address">
         <input type="text" id="input-subject" placeholder="Subject">
      </div>
      <div class="half right cf">
         <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
      </div>
      <input type="submit" value="Submit" id="input-submit">
   </form>
</div>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>

$(function() {

   $(''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(''wrapper'');
      html2canvas(wrapper, {
         onrendered: function(canvas) {
            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);

Para este svg particular no hay problema, pero para algunos svg la imagen capturada es diferente del original.

¿Hay algún método para capturar una captura de pantalla sin usar html canvas? Si no, ¿cómo puedo cambiar mi código para capturar elementos svg correctamente?

Creo que ahora todos están familiarizados con la increíble extensión de captura de pantalla https://www.awesomescreenshot.com/ . ¿Cómo están haciendo esta captura de pantalla?

¿Hay algún método en Angular 1 (no 2 o superior), React JS, Vue.js, Aurelia js o cualquier biblioteca moderna de JavaScript para tomar una captura de pantalla?

Answer 1

Puede lograr esto utilizando una biblioteca JavaScript llamada canvg (para representar SVG en lienzo correctamente), junto con html2canvas .

ᴡᴏʀᴋɪɴɢ ᴀᴍᴘʟᴇxᴀᴍᴘʟᴇ

$(function() {

   $(''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(''wrapper'');
      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);

@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;
   margin: 20px auto;
   max-width: 600px;
   padding: 5px;
   text-align: center;
}

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

<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">
   <h1>Scrrenshot</h1>
   <div class="img-div">
      <img src=''https://istack.000webhostapp.com/1tf.svg''>
   </div>
   <form class="cf">
      <div class="half left cf">
         <input type="text" id="input-name" placeholder="Name">
         <input type="email" id="input-email" placeholder="Email address">
         <input type="text" id="input-subject" placeholder="Subject">
      </div>
      <div class="half right cf">
         <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
      </div>
      <input type="submit" value="Submit" id="input-submit">
   </form>
</div>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>