本篇文章來講一下 圖像描摹的功能的實現。
我們知道要雕刻圖片可以通過分析圖片的像素來生成相應的gcode進行雕刻，但如果你想要將圖片轉換為線稿進行雕刻，這個時候就要從圖片中提取出 線稿。
例如下面的圖片：
你想要獲取到這個圖片的線稿，如下圖，是一個矢量的svg
目前有一些js的方法可以從圖片中獲取線稿，
首推的是這個庫 https://github.com/kilobtye/potrace
potrace.js 是一個用于將柵格圖像（如 JPG、PNG）轉換為矢量圖（SVG）的 JavaScript 庫，基于著名的 Potrace 算法。它能提取圖像中的線稿輪廓，非常適用于圖像轉矢量、線稿提取、激光雕刻路徑生成等應用場景。
📦 使用說明（API 文檔）
? 基本流程
potrace.loadImageFromFile(file); // 加載圖像（File 對象）
potrace.setParameter({...}); // 設置參數（可選）
potrace.process(() => {const svg = potrace.getSVG(1.0); // 獲取 SVG 字符串console.log(svg);
});
🖼? 1. 加載圖像
loadImageFromFile(file)
從 <input type="file"> 獲取的 File 對象中加載圖像。
const file = inputElement.files[0];
potrace.loadImageFromFile(file);
loadImageFromUrl(url)
從 URL 加載圖像。受瀏覽器同源策略限制，只能加載同源圖片。
potrace.loadImageFromUrl("images/sample.png");
注意：
potrace.js不會自動進行前處理，例如灰度處理或二值化。它直接將圖像轉換為黑白。
?? 2. 設置參數
setParameter({ ... })
用于微調線稿提取效果。支持以下參數：
| 參數名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
turnpolicy | string | "minority" | 路徑歧義處理方式，可選："black" "white" "left" "right" "minority" "majority" |
turdsize | number | 2 | 去除小塊區域的大小閾值，單位為像素數量 |
optcurve | boolean | true | 是否開啟曲線優化 |
alphamax | number | 1 | 拐角角度閾值，越小越銳利 |
opttolerance | number | 0.2 | 曲線優化的容差 |
示例：
potrace.setParameter({turnpolicy: "black",turdsize: 5,optcurve: true,alphamax: 0.8,opttolerance: 0.3
});
?? 3. 處理圖像
process(callback)
當圖像加載完畢后，自動運行 Potrace 算法，并執行回調函數。
potrace.process(() => {console.log("處理完成，SVG 獲取中...");
});
🖍? 4. 獲取 SVG 矢量結果
getSVG(scale, opt_type)
生成 SVG 字符串。
| 參數 | 類型 | 默認值 | 說明 |
|---|---|---|---|
scale | number | 1.0 | 輸出 SVG 的縮放倍數 |
opt_type | string | 可選 | 可設為 "curve"，表示使用曲線表示輸出（默認為路徑指令） |
const svg = potrace.getSVG(1.5, "curve");
你可以將這個字符串插入到頁面中展示 SVG：
document.getElementById("preview").innerHTML = svg;
📋 完整示例
<input type="file" id="upload" />
<div id="preview"></div>
<script src="potrace.js"></script>
<script>document.getElementById("upload").addEventListener("change", (e) => {const file = e.target.files[0];potrace.loadImageFromFile(file);potrace.setParameter({turnpolicy: "minority",turdsize: 3,optcurve: true,alphamax: 1,opttolerance: 0.2});potrace.process(() => {const svg = potrace.getSVG(1.0, "curve");document.getElementById("preview").innerHTML = svg;});});
</script>
此外還有 nodejs版本
https://github.com/iwsfg/node-potrace
圖片直接轉svg
https://github.com/tomayac/SVGcode
題外話，今天教師資格的考試成績出來啦， 過線，準備5月份的面試。
