Javascript SVG图像未在jQuery屏幕截图上捕获-SVG和html画布之间的兼容性。
最近我编写了一些代码来使用Jquery生成屏幕截图 请检查我的密码 index.htmlJavascript SVG图像未在jQuery屏幕截图上捕获-SVG和html画布之间的兼容性。,javascript,jquery,html,svg,Javascript,Jquery,Html,Svg,最近我编写了一些代码来使用Jquery生成屏幕截图 请检查我的密码 index.html <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"&g
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.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/3.2.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet">
<div id="wrapper">
<h1>Scrrenshot</h1>
<div class="img-div"><img src='http://svgur.com/i/1tf.svg'></div>
</div>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
<script>
$(function(){
jQuery('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);
});
</script>
这里的问题是,当我单击下载按钮时,它会截取包装器div的屏幕,而不会捕获替换的svg图像
为什么svg图像没有出现在屏幕截图中。我需要做哪些更改来纠正它?请帮忙
为什么svg图像与html画布不兼容 问题似乎与您正在使用的
html2canvas
版本(0.4.1)有关
您应该升级到库的最新预发行版,即
您还需要在项目中包含以正确呈现内联SVG元素
这里有一个最好将svg作为文本,并将其转换为png,然后直接通过url下载画布或png。 可按如下方式进行:
<script>
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
document.querySelector('#png-container').innerHTML = '<img src="'+png+'"/>';
DOMURL.revokeObjectURL(png);
};
img.src = url;
</script>
var svgString=new XMLSerializer().serializeToString(document.querySelector('svg');
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
var DOMURL=self.URL | | self.webkitURL | | self;
var img=新图像();
var svg=newblob([svgString],{type:“image/svg+xml;charset=utf-8”});
var url=DOMURL.createObjectURL(svg);
img.onload=函数(){
ctx.drawImage(img,0,0);
var png=canvas.toDataURL(“image/png”);
document.querySelector('#png container')。innerHTML='';
DOMURL.revokeObjectURL(png);
};
img.src=url;
您需要在html中创建空的画布或png容器
<canvas id="canvas"></canvas>
或
看看
但是,我无法在单个页面中访问多个svg元素。
它只需要“svg”,但我不知道如何访问多个svg
元素。看这里我问了一个不同的问题
我猜原因是相同的源策略,因为SVG似乎来自与页面其余部分不同的域。不,这与域无关。甚至我尝试在本地主机、同一域等上使用图像。我认为这是因为svg转换成了内联svg。但我不知道如何解决这个问题。但我需要将svg转换为内联svg,然后拍摄屏幕截图。是的,出于其他原因,我需要转换为内联svg。Img工作正常。我查过了,谢谢你,朋友。但它并没有捕获svg图像截图。我试过了。即使在给定的js小提琴中,它也不起作用。它对我起作用。你在小提琴上做了什么改变吗?朋友,现在我用谷歌浏览器查一下。在谷歌chrome中,它正在发挥作用。但在Firefox中,它不起作用。如何确保浏览器兼容性。html2canvas库和firefox(呈现SVG的方式)似乎也存在一些问题。如果我找到任何修复方法,我会告诉你。@GRUNT html2canvas非常棒,但我不能在一个页面中访问多个svg元素。它只需要“svg”,但我不知道如何访问多个svg元素。
<canvas id="canvas"></canvas>
<div id="png-container"></div>