使用 Sharp 将 svg 转换为 png 会损坏 node.js 中的文本

Question

我正在使用 sharp 将 svg 文件转换为 png 格式以上传到 slack 工作区。

我发现了同样的问题here

 const options = {
    d3Module: d3,
    selector: '#chart',
    container: '<div id="container"><div id="chart"></div></div>'
  }
  const d3n = new D3Node(options);
  const margin = {
    top: 10, right: 5, bottom: 30, left: 5
  }

  const width = 1000 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;
  const svgWidth = width + margin.left + margin.right;
  const svgHeight = height + margin.top + margin.bottom;

  const svg = d3n.createSVG(svgWidth, svgHeight);
  const tempData = [{ year: 2020, value: 100 }, { year: 2019, value: 200 }, { year: 2018, value: 30 }, { year: 2017, value: 50 }, { year: 2016, value: 80 }];

  const xScale = d3.scaleBand().range([0,width]).padding(0.5);
  const yScale = d3.scaleLinear().range([height,0]);
  
  let yMax = d3.max(tempData, (d) => {return d.value})
  yMax += yMax * 0.3;
  xScale.domain(tempData.map((d) => {return d.year} ))
  yScale.domain([0,yMax]);

  svg.append('rect')
    .attr('width','100%')
    .attr('height', '100%')
    .style('fill','rgb(28, 35, 51);');

  svg.append('text')
    .attr('transform','translate(150,0)')
    .attr('fill','#85ceff')
    .attr('font-size','24px')
    .attr('x',50)
    .attr('y',50)
    .text('Node and D3 Bar chart')
  
  svg.append('g').attr('transform',`translate(${100}, ${100})`);

  svg.append('g')
    .attr('transform', `translate(50, ${height})`)
    .call(d3.axisBottom(xScale))
    .append('text')
    .attr('y', height-380)
    .attr('x',width-500)
    .attr('text-anchor','end')
    .attr('stroke','black')
    .attr('fill','#85ceff')
    .attr('font-size','20px')
    .text('Year')
  
  svg.append('g')
    .attr('transform','translate(50,0)')
    .call(d3.axisLeft(yScale).tickFormat((d) => {
      return `$${d}`;
    }).ticks(5))
    .append('text')
    .attr('transform','rotate(-90)')
    .attr('y',150)
    .attr('x',-150)
    .attr('dy','-9.1em')
    .attr('text-anchor','end')
    .attr('stroke','black')
    .attr('font-size','20px')
    .attr('fill','#85ceff')
    .text('Cost')

  fs.writeFileSync('out.svg', d3n.svgString());
  sharp('out.svg')
    .png()
    .toFile('sharp.png')
    .then((info) => {
      console.log("Svg to Png conversion completed", info);
    })
    .catch((error) => {
      console.log(error)
    })

但是，当我将我的 svg 处理成 png 时，我的文字被损坏并且不再出现在照片中。我在这里做错了什么？

澄清一下，我运行在 replit 上安装此服务器。当我在本地运行这段代码时， png 没有损坏。 replit 服务器可能是问题所在吗？

Answer 1

在浏览了关于这个 [Link 1, Link 2 , Link 3] 的几个 Github 问题后，我做了更多的研究，发现我需要一个字体配置文件和下载的字体，因为 Replit 服务器没有字体已安装。

File Structure


    - index.js
    - api
     - fetch.js
    - fonts
     - fonts.conf
     - SourceSansPro-Regular.ttf

fonts.conf


     <?xml version="1.0"?>
     <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
     <fontconfig>
     <dir>/home/runner/gittrack/fonts</dir>
     <config></config>
     </fontconfig>

添加上述更改后，我现在可以在我的 png 上获取字体

使用 Sharp 将 svg 转换为 png 会损坏 node.js 中的文本

Using Sharp to turn svg to png corrupts text in node.js

node.js

svg

d3.js

sharp