下載帶有自定義字體的SVG元素至PNG

我試圖為我正在構建的應用程式添加一個功能，讓用戶將渲染好的SVG元素下載為PNG檔案。該應用是用React撰寫的，我決定使用save-svg-to-png包來實作這一功能。到目前為止一切正常，但我在一個使用粗體Roboto字體的元素上遇到了問題--在下載圖片后，字體又回到了默認狀態（Times New Roman或類似的字體）。現在，我知道在可以傳遞給saveSvgToPng函式的options物件中，有一個fonts引數，其簽名是：

fonts - 一個{text, url, format}物件的串列，指定在SVG中行內哪些字體。如果省略這個選項，則默認為自動檢測字體規則。

但是沒有任何使用例子來說明這一點，我在網上也找不到任何例子。我遇到的問題似乎是關于url屬性的--我不確定在那里應該包含什么來使字體正確呈現。我試著用字體的base64編碼生成一個URI，并從Google Fonts網站上添加URL（https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap），但似乎都不起作用。誰能幫我解決這個問題呢？

uj5u.com熱心網友回復：

你需要在url引數中提供指向實際字體檔案（.woff）的URI，以及在text引數中提供@font-face規則。

注意，你的url指向的檔案只是一個CSS檔案，實際的字體檔案還是要從那里抓取（如果你需要一個編程方式，我前段時間寫了something，你也許可以重新使用）。

所以在你的情況下，你必須通過（假設你只有拉丁語范圍內的字形）

saveSvgAsPng(Element, file_name, {
  fonts: [
    {
      url: "https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2"/span>,
      text: `.
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: u 0000-00ff, u 0131, u 0152-0153, u 02bb-02bc, u 02c6, u 02da, u 02dc, u 2000-206f, u 2074, u 20ac, u 2122, u 2191, u 2193, u 2212, u 2215, u feff, u fffd。
}`    
    }
  ]
});

顯示代碼片段

//使用svgAsDataUri而不是saveSvgAsPng來避免下載檔案。
svgAsDataUri(document.getElementById("target"/span>), {
    fonts: [
    {
    url: "https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2"/span>,
    text: `.
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: u 0000-00ff, u 0131, u 0152-0153, u 02bb-02bc, u 02c6, u 02da, u 02dc, u 2000-206f, u 2074, u 20ac, u 2122, u 2191, u 2193, u 2212, u 2215, u feff, u fffd。
}`    
   }
  ]
}).then( uri =>  {
    const img = new Image() 。
  img.src = uri;
  document.body.append（img）。
});

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700& display=swap"); 

<script src="https://cdn. jsdelivr.net/gh/exupero/saveSvgAsPng/src/saveSvgAsPng.js"></script>/span>
<svg id="target">/span>
  <text font-family="Roboto"/span> y="50"/span>> 我的文本</文本>>
</svg>/span>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

我并不那么樂觀。 在SVG中使用字體和 css - 如何在我的網站上的SVG影像中使用自定義字體？- 圖形設計堆疊交流和 SVG text 和 Small, Scalable, Accessible Typographic Designs | CSS-Tricks 多少得出結論，當SVG使用<img>顯示時，無法在SVG中顯示自定義字體。我知道這不是在回答你的問題，但是下面的例子顯示了如何將一個行內SVG加載到一個影像物件中，在<canvas>中繪制，并作為一個資料URL匯出為PNG影像。這是將SVG轉換為PNG的基本程序，你可以看到它破壞了自定義字體。

。

document. addEventListener('DOMContentLoaded', e =>  {
  let img = document.images[0] 。
  let svg = document.getElementById('svg') 。
  let image = new Image()。
  let canvas = document.getElementById('canvas') 。
  let ctx = canvas.getContext('2d')。
  
  image.addEventListener('load', e =>  {
    ctx.drawImage（e. target, 0, 0, 300, 30）。)
    img.src = canvas.toDataURL（"image/png"）。
  });
  image.src = "data:image/svg xml,"   svg.outerHTML;
});

<p>/span>SVG影像。 </p>SVG影像：</p>
< svg id="svg"/span> viewBox="0 0 100 10"/span> width="300"/span> height="30"/span> xmlns="http: //www. w3.org/2000/svg">。
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700& display=swap');
    svg{
      font-family: Roboto, sans-serif;
    }
    text {
      font-family:'Roboto'/span>。
      font-weight: bold;
    }
  </style>>
  < text font-size="10" text-anchor="mid" dominant-baseline="middle"/span> x="50"/span> y="5"/span>>。 Test</text>
</svg>/span>
<p>Canvas圖片：</p>
< canvas id="canvas" width="300"/span> height="30"/span>> </canvas>>
<p>PNG影像：</p> 
<p>< img /></p> 

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

最新進展

好的，現在更樂觀了...... 我用字體作為資料URL對我的例子進行了測驗，它確實有效。在下面的例子中，我將字體作為一個資料URL嵌入其中（不幸的是，字體的資料太多，所以e只是一個占位符）。

這就是結論（也是Robert Longson的最初評論）。字體應該被嵌入為一個資料URL。

。

document. addEventListener('DOMContentLoaded', e =>  {
  let img = document.images[0] 。
  let svg = document.getElementById('svg') 。
  let image = new Image()。
  let canvas = document.getElementById('canvas') 。
  let ctx = canvas.getContext('2d')。
  
  image.addEventListener('load', e =>  {
    ctx.drawImage（e. target, 0, 0, 300, 30）。)
    img.src = canvas.toDataURL（"image/png"）。
  });
  image.src = "data:image/svg xml,"   svg.outerHTML;
});

<p>/span>SVG影像。 </p>SVG影像：</p>
< svg id="svg"/span> viewBox="0 0 100 10"/span> width="300"/span> height="30"/span> xmlns="http: //www. w3.org/2000/svg">。
  <style>
    <! [CDATA[
    @font-face {
      font-family: Roboto;
      src: url('data:font/ttf;base64,[ ---- font data goes here ------ ]') format("truetype") 。
    }
    svg{
      font-family: Roboto, sans-serif;
    }
    text {
      font-family: Roboto;
    }
    ]]>。
  </style>
  < text font-size="10" text-anchor="mid" dominant-baseline="middle"/span> x="50"/span> y="5"/span>>。 Test</text>
</svg>/span>
<p>Canvas圖片：</p>
< canvas id="canvas" width="300"/span> height="30"/span>> </canvas>>
<p>PNG影像：</p> 
<p>< img /></p> 

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/320110.html

標籤：

上一篇：繼承django表單欄位的正確方法

下一篇：在SVG.Net中，如何將"填充"設定為"無"？