我正在使用 vivagraphs 生成动态 svg 元素,但是当我单击捕获按钮时,没有显示节点和边缘。
这是脚本:
$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
$('#btn').click(function(){
html2canvas($("#graph1"), {
onrendered: function(canvas) {
var myImage = canvas.toDataURL("img/png");
window.open(myImage);
}
});
});
当我检查元素时,svg 在渲染图形后显示,但快照不包含节点和边。
html2canvas 有替代方案吗?或者我可以解决这个问题吗?
最佳答案
如果您想将 Canvas 上的图像保存为某种图像格式,这里可以为您提供一些帮助。希望这会对您有所帮助。
$(document).ready(function() {
$('#btn').click(function(){
html2canvas(document.getElementById('graph1'), {
onrendered: function(canvas) {
var cs = new CanvasSaver('save_img.php',canvas,'myimage')
}
});
});
});
此处 CanvasSaver() 函数定义如下,它采用三个参数,其中一个是 php 文件,它将图像从 RAW 日期处理为某种图像格式。我将在此脚本部分下方编写“save_img.php”代码,并将该文件保存在您的根目录中。
function CanvasSaver(url, cnvs, fname) {
this.url = url;
if(!cnvs || !url) return;
fname = fname || 'picture';
var data = cnvs.toDataURL("image/png");
data = data.substr(data.indexOf(',') + 1).toString();
var dataInput = document.createElement("input") ;
dataInput.setAttribute("name", 'imgdata') ;
dataInput.setAttribute("value", data);
dataInput.setAttribute("type", "hidden");
var nameInput = document.createElement("input") ;
nameInput.setAttribute("name", 'name') ;
nameInput.setAttribute("value", fname + '.jpg');
var myForm = document.createElement("form");
myForm.method = 'post';
myForm.action = url;
myForm.appendChild(dataInput);
myForm.appendChild(nameInput);
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;
}
在上面的脚本中,无论您想从浏览器保存什么图像格式,请在上面的脚本函数中提供该图像扩展名
nameInput.setAttribute("value", fname + '.jpg');
现在这是您的“save_img.php”代码并将其保存在您的根目录中。
<?php
# we are a PNG image
header('Content-type: image/png');
# we are an attachment (eg download), and we have a name
header('Content-Disposition: attachment; filename="' . $_POST['name'] .'"');
#capture, replace any spaces w/ plusses, and decode
$encoded = $_POST['imgdata'];
$encoded = str_replace(' ', '+', $encoded);
$decoded = base64_decode($encoded);
#write decoded data
echo $decoded;
?>
关于javascript - html2canvas.js 不捕获动态生成的内容的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22960471/