使用 JavaScript 將 SVG 轉換為 PNG

Habdul Hazeez 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 Canvg 將 SVG 字串轉換為影象
  2. 在 JavaScript 中使用 Canvg 將 SVG 檔案轉換為影象
使用 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 初始化變數的新值設定為 CanvgfromString 方法。
    • 將 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>

輸出:

星形 SVG 作為 PNG 影象

如果你右鍵單擊它並選擇在新標籤頁中開啟影象,你可以確認它是一個影象。你會得到以下。

SVG 在瀏覽器中作為 PNG 影象

在 JavaScript 中使用 Canvg 將 SVG 檔案轉換為影象

如果你將 SVG 儲存為檔案,你會發現這種方法很有用。Canvg 允許你非同步讀取 SVG 檔案,並且你可以將 SVG 作為影象寫入螢幕。

以下是使用 Canvg 以 PNG 格式顯示 SVG 檔案的步驟。

  • 在你的伺服器中為此專案建立一個資料夾。
  • Skypack CDN 匯入 Canvg
  • 建立一個 Canvg 初始化變數並將其值設定為 NULL
  • 建立一個非同步 onload 函式。
  • onload 函式中,執行以下操作:
    • 從你的 HTML 中選擇 Canvas。
    • 從 Canvas 中獲取 2d context。
    • Canvg 初始化變數的新值設定為 await 運算子和 Canvgfrom 方法。
    • 將 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>

輸出:

在 Web 瀏覽器中將 Cat SVG 作為 PNG 影象

此外,你可以確認它是 PNG 影象。

確認 PNG 圖片

在第二個示例中,我們使用了 cat SVG。你可以在 Freesvg 上下載 cat SVG。

Habdul Hazeez avatar Habdul Hazeez avatar

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

相關文章 - JavaScript Image