mercredi 14 juin 2017

Make a screen shot downnload button for a svg using Jquery Or Angular ,React , any modern javascript libraray

Recently i write code for to capture screenshot of a page using html 5 . Everything is fine until svg image come to the area . When i converted svg to inline svg after that screenshot not capturing inline svg

Please check http://ift.tt/2srAWc6

<script src="http://ift.tt/2l3yFeF"></script>
<script src="http://ift.tt/2srfRyh"></script>
<script src="http://ift.tt/1DUQZgd"></script>
<script src="http://ift.tt/2nYZfvi"></script>
<div id="wrapper">
   <h1>Scrrenshot</h1>
   <div class="img-div"><img src='http://ift.tt/2srJfog'></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);

For this particular svg there is no problem, but for some svg the captured image is different from original .

Is there any method for capturing screenshot without using html canvas ? or what to do for make this html canvas capture for svg .

I think now everyone is familiar with awesome screen shot extension [http://ift.tt/1NJl1Gw]. How they are doing this screen capture .

Is there any method in Angular js for doing this . I can use angular 1 , but i cannot use angular 2 and further because it is a frame work .

So is there any method in Angular 1, React JS , Vue js or any modern JavaScript library for taking screenshot?

Please help .




Aucun commentaire:

Enregistrer un commentaire