Canvas将SVG转换为PNG并不能获得完整的大小

Question

我有大的SVG图像大约200（公司的＆gt; 50部门）。示例信息是：

SVGRect {height: 270, width: 1600, y: 0, x: -150}

我希望导出大小图像取决于SVG的大小。这是导出时的代码

export_svg: function () {
            var html = d3.select("svg")
                .attr("version", '1.1')
                .attr("xmlns", "http://www.w3.org/2000/svg")
                .node().parentNode.innerHTML
            var imgsrc = 'data:image/svg+xml;base64,' + btoa(html)

            var canvas = document.querySelector("canvas"),
                context = canvas.getContext("2d")
            // clear cache previous
            canvas.width = $('svg')[0].getBBox().width
            canvas.height = $('svg')[0].getBBox().height
            context.clearRect(0, 0, canvas.width, canvas.height);
            var image = new Image
            image.src = imgsrc
            context.drawImage(image, 0, 0)
            var canvasdata = canvas.toDataURL("image/png", 1)

            d3.select("#export_svg").attr('href', canvasdata)
            d3.select("#export_svg").attr('download', 'Org Chart.png')


        },

SVG的协调员在这里有关系吗？

当我导出到PNG时，它无法获得组织结构图的完整大小

Answer 1

您可能需要更改context.drawImage（image，0,0）; to context.drawImage（image，0,0，canvas.width，canvas.height）;）