固定分辨率的大 svg 到 png
Large svg to png in fixed resolution
我正在使用 canvg lib 将 svg 转换为 png，但当我的 svg 大小超过 10000 时，它无法在画布上绘制它，数据网址只得到"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创建图的代码。 一个保存和下载按钮在那里保存将获取 png 的数据 URL 并将其保存在服务器上，而下载将立即下载图像.. 相同的函数适用于两者与参数.
"渲染回调"出现问题，而 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的部分一样。
__Be小心这个片段，就会有lags__
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);
}
}
});
}
相关文章：
- 将SVG下载为PNG图像
- 从画布上的SVG导出PNG
- 固定分辨率的大 svg 到 png
- 我如何将多个 svg 隐藏到一个 png 中，因为它们在 html 上
- 在Web Worker中将SVG转换为PNG
- 使用PHP将png/svg导出为单个png文件
- 当使用canvg将Highchart SVG转换为PNG时，所有文本都会出现两次——如何解决
- 在VB.net/C#或Objective-C上将JPEG或PNG转换为SVG格式
- 如何将SVG节点转换为PNG并下载给用户
- 阿巴普 :将 svg 转换为 png
- 使用 SVG 渲染引擎将 svg 转换为 png 时出现异常
- 图像(jpeg 和 png）文件如何在 SVG 文件中格式化
- 将用Javascript绘制的外部SVG文件导出为PNG图像
- 将使用 D3js 创建的 SVG 转换为 PNG
- SVG 到 PNG 下载器 PHP
- 在多边形中包含 png/svg
- 在客户端将 svg 转换为 png
- 通过画布从 svg 或 svg 输出 300 张具有正确文件名的 png 图像
- SVG文件 :如何使用Inkscape将PNG文件转换为SVG文件后获取路径标记数据
- 将带有图像标签的 Svg 转换为 PNG
