使用 JavaScript 將 SVG 轉換為 PNG
本教程教你如何在 Web 瀏覽器中將 SVG 轉換為 PNG 影象。我們將使用的方法涉及使用 Canvg 並使用 toDataURL 方法將 Canvas 的內容儲存為 PNG 影象。
在 JavaScript 中使用 Canvg 將 SVG 字串轉換為影象
Canvg 是一個開源的 JavaScript 解析器和渲染器，可以將 SVG 轉換為 Web 瀏覽器中的影象。SVG 可以是字串格式或來自 DOM 元素。
在這裡，我們將向你展示如何將 SVG 字串轉換為影象。
要開始使用 Canvg，安裝像 XAMPP 這樣的本地伺服器 因為瀏覽器中的 Canvg 使用 ES 模組。然後，訪問官方 Canvg GitHub 儲存庫 並選擇你喜歡的下載選項。
同時，我們將選擇允許你在網路瀏覽器中使用 Canvg 的選項。
以下是在 Web 瀏覽器中使用 Canvg 將 SVG 字串轉換為 PNG 的步驟。
-
在你的伺服器中為此專案建立一個資料夾。
-
從
Skypack CDN匯入Canvg。 -
建立一個
Canvg初始化變數並將其值設定為NULL。 -
建立一個
onload函式。 -
在
onload函式中，執行以下操作：- 從你的 HTML 中選擇 Canvas。
- 從 Canvas 中獲取 2d context。
- 將
Canvg初始化變數的新值設定為Canvg的fromString方法。 - 將 SVG 程式碼讀入
fromString方法。 - 呼叫初始化變數中可用的
start方法。 - 使用
toDataURL將影象轉換為 PNG。 - 在螢幕上寫入影象。
這段程式碼是上面詳述的步驟的實現。
<body>
<canvas id="myCanvas"></canvas>
<script type="module">
// Import Canvg from the Skypack CDN
import { Canvg } from 'https://cdn.skypack.dev/canvg';
// Set an initialization variable to null
let v = null;
// Create a function that fires when the
// web browser loads the file
window.onload = () => {
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Read the SVG string using the fromString method
// of Canvg
v = Canvg.fromString(ctx, '<svg height="200" width="300"><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:navy;stroke-width:5;fill-rule:nonzero;"/></svg>');
// Start drawing the SVG on the canvas
v.start();
// Convert the Canvas to an image
var img = canvas.toDataURL("img/png");
// Write the image on the screen
document.write('<img src="' + img + '"/>');
}
</script>
</body>
輸出：
如果你右鍵單擊它並選擇在新標籤頁中開啟影象，你可以確認它是一個影象。你會得到以下。
在 JavaScript 中使用 Canvg 將 SVG 檔案轉換為影象
如果你將 SVG 儲存為檔案，你會發現這種方法很有用。Canvg 允許你非同步讀取 SVG 檔案，並且你可以將 SVG 作為影象寫入螢幕。
以下是使用 Canvg 以 PNG 格式顯示 SVG 檔案的步驟。
-
在你的伺服器中為此專案建立一個資料夾。
-
從
Skypack CDN匯入Canvg。 -
建立一個
Canvg初始化變數並將其值設定為NULL。 -
建立一個非同步
onload函式。 -
在
onload函式中，執行以下操作：- 從你的 HTML 中選擇 Canvas。
- 從 Canvas 中獲取 2d context。
- 將
Canvg初始化變數的新值設定為await運算子和Canvg的from方法。 - 將 SVG 檔案讀入
from方法。 - 呼叫初始化變數中可用的
start方法。 - 使用
toDataURL將影象轉換為 PNG。 - 在螢幕上寫下影象。
此程式碼是將 SVG 檔案轉換為 PNG 的實現。
<body>
<canvas id="myCanvas"></canvas>
<script type="module">
// Import Canvg from the Skypack CDN
import { Canvg } from 'https://cdn.skypack.dev/canvg';
// Set an initialization variable to null
let v = null;
// Create a function that fires when the
// web browser loads the file
window.onload = async () => {
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Read the SVG file using the from method
// of Canvg
v = await Canvg.from(ctx, './cat.svg');
// Start drawing the SVG on the canvas
v.start();
// Convert the Canvas to an image
var img = canvas.toDataURL("img/png");
// Write the image on the screen
document.write('<img src="' + img + '"/>');
}
</script>
</body>
輸出：
此外，你可以確認它是 PNG 影象。
在第二個示例中，我們使用了 cat SVG。你可以在 Freesvg 上下載 cat SVG。
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn