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