[英]Large svg to png in fixed resolution
我正在使用canvg lib将svg转换为png,但是有些方法在我的svg大小大于10000时却无法在画布上绘制,并且data-URL仅获得“ data :;” 空的
这是我正在使用的代码
function getDiagramImage(isTrue,_callback){
var html = d3.select("svg")
//.attr("version", 1.1)
//.attr("xmlns", "http://www.w3.org/2000/svg")
.attr({
'xmlns': 'http://www.w3.org/2000/svg',
'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink',
version: '1.1'
})
.node().parentNode.innerHTML;
d3.select('#hiddenCanvas').attr('width',_canvasWidth).attr('height',(parseFloat(_canvasHeight) + 300) );
var canvas = document.getElementById('hiddenCanvas');
var context = canvas.getContext("2d");
canvg(document.getElementById('hiddenCanvas'), html, {
renderCallback: function() {
var dataURL = canvas.toDataURL();
if(!isTrue){
var pngimg = '<img src="'+dataURL+'">';
d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "export_"+Date.now()+".png";
a.href = dataURL;
document.body.appendChild(a);
a.click();
}
if(_callback){
_callback(dataURL);
}
}
});
}
关于此功能..有d3.js代码可创建图表。 并带有一个保存和下载按钮,保存将获取数据URL到png,并将其保存在服务器上,而下载将立即下载图像。
问题伴随着“ renderCallback”出现,而svg很大,数据URL为空,我也尝试了超时,但是没有得到结果并且计时器继续运行
最后,我进行了测试,实际上,在Firefox中大约23500 x 23500 px
的大小之前,它似乎运行良好。
但只有当您更改
d3.select("svg")
.attr(foo:bar)
.node().parentNode.innerHTML
与
d3.select("svg")
.attr(foo:bar)
.node().outerHTML();
另外,canvg似乎可以自行设置渲染画布的大小,因此您的
d3.select('#hiddenCanvas').attr('width',_canvasWidth).attr('height',(parseFloat(_canvasHeight) + 300) );
是没有用的,可能与设置_canvasWidth
和_canvasHeight
的部分_canvasHeight
。
__请谨慎处理此代码段,否则会出现滞后现象__
function getDiagramImage(isTrue,_callback){ var html = d3.select("svg") .attr({ 'xmlns': 'http://www.w3.org/2000/svg', 'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink', version: '1.1' }) .node().outerHTML; var canvas = document.getElementById('hiddenCanvas'); var context = canvas.getContext("2d"); canvg(canvas, html, {renderCallback: function(){ var dataURL = canvas.toDataURL(); if(!isTrue){ var pngimg = '<img src="'+dataURL+'">'; d3.select("#pngdataurl").html(pngimg); var a = document.createElement("a"); a.download = "export_"+Date.now()+".png"; a.href = dataURL; document.body.appendChild(a); // a.click(); } if(_callback){ _callback(dataURL); } }}); } getDiagramImage();
svg{border:3px solid green;} canvas{border:3px solid blue;} img{border:3px solid red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/exporting/canvg.js"></script> <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15000" height="15000" viewBox="-0.5,0,500.5,500.5"> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="-0.5,118 382,500.5 441,500.5 -0.5,59 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="-0.5,295 205,500.5 264,500.5 -0.5,236 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="-0.5,59 441,500.5 500,500.5 499.8,500.2 -0.5,0 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="-0.5,354 146,500.5 205,500.5 -0.5,295 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="-0.5,500.5 28,500.5 -0.5,472 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="-0.5,472 28,500.5 87,500.5 -0.5,413 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="-0.5,413 87,500.5 146,500.5 -0.5,354 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="-0.5,236 264,500.5 323,500.5 -0.5,177 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="499.5,0.5 448,0.5 499.5,52 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="499.5,52 448,0.5 392,0.5 499.5,108 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="0,0.5 499.5,500 499.5,444 56,0.5 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="392,0.5 336,0.5 499.5,164 499.5,108 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="280,0.5 499.5,220 499.5,164 336,0.5 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="56,0.5 499.5,444 499.5,388 112,0.5 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="112,0.5 499.5,388 499.5,332 168,0.5 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="168,0.5 499.5,332 499.5,276 224,0.5 "/> <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="224,0.5 499.5,276 499.5,220 280,0.5 "/> </svg> <canvas id="hiddenCanvas"></canvas> <div id="pngdataurl"></div> <!--**__Be carefull with this snippet, there will be lags__**-->
这是我尝试修复此问题的方法
function getDiagramImage(isTrue,_callback){
var html = d3.select("#nodePane svg#nodeEditor")
.attr({
'xmlns': 'http://www.w3.org/2000/svg',
'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink',
version: '1.1'
})
.node().parentNode.innerHTML;
var _imageHeight = parseFloat(_canvasHeight);
var _imageWidth = parseFloat(_canvasWidth);
if(_imageHeight > 10000){
_imageHeight = 9700;
}
if(_imageWidth > 7000){
_imageWidth = 7000;
}
d3.select('#hiddenCanvas').attr('width',_imageWidth+"px").attr('height',( _imageHeight + 300+"px" ) );
var canvas = document.getElementById('hiddenCanvas');
var context = canvas.getContext("2d");
canvg('hiddenCanvas', html, {
ignoreMouse:true,
ignoreAnimation:true,
ignoreDimensions:true,
scaleWidth:_imageWidth,
scaleHeight:_imageHeight,
renderCallback: function() {
var dataURL = canvas.toDataURL();
if(!isTrue){
var pngimg = '<img src="'+dataURL+'">';
d3.select("#pngdataurl").html(pngimg);
var a = document.createElement("a");
a.download = "export_"+Date.now()+".png";
a.href = dataURL;
document.body.appendChild(a);
a.click();
}
if(_callback){
_callback(dataURL);
}
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.