Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery / Phantomjs / Php

Making A Proper Image Capture Of Current Screen Using Jquery Or Php Or Convert Div To Pdf

Post a Comment
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

Solution 1:

Please check below mentioned solution. I just tried to cover up your issue.

$(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 restvar $svg = jQuery(data).find('svg');

         // Add replaced image's ID to the new SVGif (typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
         }
         // Add replaced image's classes to the new SVGif (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) {
   functionurlsToAbsolute(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;
   }

   functionscreenshotPage() {
      var wrapper = document.getElementById('img-div');
      html2canvas(wrapper, {
         onrendered: function(canvas) {
            functiongetOffset(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');
            });
         }
      });
   }

   functionaddOnPageLoad_() {
      window.addEventListener('DOMContentLoaded', function(e) {
         var scrollX = document.documentElement.dataset.scrollX || 0;
         var scrollY = document.documentElement.dataset.scrollY || 0;
         window.scrollTo(scrollX, scrollY);
      });
   }

   functiongenerate() {
      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(1px1px0 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 00;
    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(01px1px rgba(black, 0.1));
   resize: none;
   &:focus {
      @include box-shadow(00px2px rgba($red, 1)!important);
   }
}

#input-submit {
   color: white;
   background: $red;
   cursor: pointer;
   &:hover {
      @include box-shadow(01px1px1px 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; }
  }
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script><scriptsrc="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="wrapper"><divid="test"><divclass="description-div"><p>Sample description</p></div><divclass="img-div"id="img-div"></div></div><formclass="cf"><divclass="half left cf"><inputtype="text"name="user-name"required><selectname="design-name"class="desgign-class"required><optionvalue="" >select</option><option>2</option><option>3</option><option>4</option></select><inputtype="submit"name="submit"value="submit"class="submit"></div></form></div><divclass="new"><aclass="btn btn-success"href="javascript:void(0);"onclick="generate();">Generate Screenshot »</a></div>

Solution 2:

As far as I can tell, this is a working version: https://jsfiddle.net/7bqukhff/16/

The difference comes from the way you are drawing onto the offscreenCanvas.

Here's what happens in your code:

  1. You are setting the dimensions of the offscreenCanvas to the width and height of the SVG (instead of the width & height of the wrapper) in lines 108 & 109
  2. You subtract something (40 and 62) from the left & top position of the SVG. This position is referring to the position on the page rather than the relative position of the SVG within the wrapper.
  3. You draw the SVG onto the canvas with page-coordinates instead of relative coordinates

The fix looks like this:

First, set the dimensions of the canvas to the dimensions of the wrapper:

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

Then, draw the svg using relative coordinates:

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

This seems to work as you need.

P.S.: The option "4" doesn't work but that's due to it using HTTP on an HTTPS site, so it's not loaded due to security restrictions.

You may like these posts

Post a Comment for "Making A Proper Image Capture Of Current Screen Using Jquery Or Php Or Convert Div To Pdf"