如何将SVG节点转换为PNG并下载给用户
How can I convert an SVG node to PNG and download it to the user?
我有一个使用svg构建条形图的应用程序,我想下载一个PNG图像给用户。我正在使用FileSaver.js和canvas-to-blob.min.js polyfills来获得对canvas.toBlob()和window.saveAs().的支持
下面是附在下载按钮上的代码片段:
$('#download-button').on('click', function(e) {
e.preventDefault();
var chart = $('#bar-chart')
.attr('xmlns', 'http://www.w3.org/2000/svg');
var width = chart.width();
var height = chart.height();
var data = new XMLSerializer().serializeToString(chart.get(0));
var svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
var url = URL.createObjectURL(svg);
var img = $('<img />')
.width(width)
.height(height)
.on('load', function() {
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img.get(0), 0, 0);
canvas.toBlob(function(blob) {
saveAs(blob, "test.png");
});
});
img.attr('src', url);
});
它提取SVG图像的XML,将其封装在blob中,并为blob创建对象URL。然后,它创建一个图像对象,并将其src设置为对象URL。加载事件处理程序然后创建一个画布,并使用drawImage()将图像渲染到画布上。最后,它将图像数据提取到第二个blob中,并使用saveAs()将其下载为"test.png"
一切似乎都正常,但下载的PNG文件并没有完整的图像——只有左上角的一部分。浏览器是否会在SVG完全呈现之前触发"加载"事件?还是我只是错过了什么?
这里有一个jsFiddle演示这个问题。
(移动注释以回答,以便关闭问题:)
SVG元素的100%宽度被解释为100个像素。如果您控制日志的宽度/高度,您可以看到这一点。
设置绝对宽度是解决该问题的一种方法。
相关文章:
- 如何在生成下载文件时显示加载动画
- 直接下载文件,而不是从window.open(url)
- 如何使用javascript或html下载PDF格式的填写表单
- Javascript运行php文件,然后下载文件
- 在单击href链接的同时下载文件
- 尽管链接成功并已成功下载,但未找到NPM模块
- 如何在Edge中下载图像/png数据URI
- 将SVG下载为PNG图像
- 在fabric.js中以PNG格式下载Canvas,给出网络错误
- 将画布下载为PNG图像
- 如何将SVG节点转换为PNG并下载给用户
- 下载画布图像 png Chrome/Safari
- SVG 到 PNG 下载器 PHP
- 如何获取使用XMLHttpRequest(XHR2)下载的PNG的像素数据
- 如何将HTML转换为HTML5画布并下载为PNG文件
- 如何下载画布为PNG图像格式,而不是二进制文件
- 下载图表JOINTJS图像|SVG==>带有Javascript的PNG
- 使用JQuery将表格下载为PNG
- 如何在 AngularJS 中下载和显示文本和 png 文件
- 下载XMLHttpRequest POST后的png文件