แปลง TTF เป็น SVG ใน JavaScript

การแปลงไฟล์ TTF (TrueType Font) เป็น SVG (Scalable Vector Graphics) ใน JavaScript ช่วยให้นักพัฒนาสามารถใช้ฟอนต์แบบกำหนดเองในรูปแบบเวกเตอร์ที่ปรับขนาดได้ซึ่งเหมาะสำหรับโครงการเว็บ กระบวนการนี้เกี่ยวข้องกับการอ่านไฟล์ TTF, สกัดไกลฟ์ฟอนต์, และแปลงให้เป็นข้อมูลพาธ SVG ในบทความนี้เราจะเรียนรู้วิธีการแปลง TTF เป็น SVG ใน JavaScript

บทความนี้ครอบคลุมหัวข้อต่อไปนี้:

ไลบรารี JavaScript สำหรับแปลง TTF เป็น SVG

เราจะใช้ไลบรารี Aspose.Font for JavaScript เพื่อดำเนินการแปลง TTF เป็น SVG มันช่วยให้นักพัฒนาสามารถจัดการ, สกัด, และจัดการข้อมูลฟอนต์ในหลายรูปแบบ รวมถึง TrueType (.ttf), OpenType (.otf), และอื่น ๆ

กรุณา ดาวน์โหลดไลบรารี และทำตามคำแนะนำในการ ติดตั้ง Aspose.Font for JavaScript

แปลง TTF เป็น SVG โดยใช้ JavaScript

เราสามารถแปลงฟอนต์ TrueType เป็น SVG ได้อย่างง่ายดายใน JavaScript ภายในแอปพลิเคชันเว็บ เราจะโหลดไฟล์ TTF แล้วแปลงเป็นรูปแบบ SVG เว็บเวิร์คเกอร์จะจัดการกับงานที่ต้องใช้ทรัพยากรมากเพื่อหลีกเลี่ยงการบล็อกเธรด UI หลัก ซึ่งทำให้แอปพลิเคชันตัวแปลงของเราง่ายต่อการใช้งาน, ทำให้กระบวนการแปลงง่ายขึ้น และช่วยให้สามารถดาวน์โหลดไฟล์ได้อย่างมีประสิทธิภาพ

โปรดทำตามขั้นตอนด้านล่างเพื่อแปลงฟอนต์ TrueType เป็น SVG โดยใช้ JavaScript:

  • สร้างเว็บเวิร์คเกอร์โดยใช้โค้ดตัวอย่างต่อไปนี้:
/*Create Web Worker*/
const AsposeFontWebWorker = new Worker("AsposeFontforJS.js");
AsposeFontWebWorker.onerror = evt => console.log(`Error from Web Worker: ${evt.message}`);
AsposeFontWebWorker.onmessage = evt => document.getElementById('output').textContent =
(evt.data == 'ready') ? 'library loaded!' :
(evt.data.json.errorCode == 0) ? `Result:\n${DownloadFile(evt.data.json.fileNameResult, "font/ttf", evt.data.params[0])}` : `Error: ${evt.data.json.errorText}`;
/*Event handler*/
const fTTFtoSVG = e => {
const file_reader = new FileReader();
file_reader.onload = event => {
/*Convert a TTF fonts to SVG and save - Ask Web Worker*/
AsposeFontWebWorker.postMessage({ "operation": 'AsposeFontConvertToSVG', "params": [event.target.result, e.target.files[0].name, 'Module.FontType.TTF'] }, [event.target.result]);
};
file_reader.readAsArrayBuffer(e.target.files[0]);
};
/*Make a link to download the result file*/
const DownloadFile = function (filename, mime, content) {
mime = mime || "application/octet-stream";
var link = document.createElement("a");
link.href = URL.createObjectURL(new Blob([content], {type: mime}));
link.download = filename;
link.textContent = filename;
link.title = "Click here to download the file";
document.getElementById('fileDownload').appendChild(link);
document.getElementById('fileDownload').appendChild(document.createElement("br"));
}
view raw convert-ttf-to-svg-in-javascript_webworker.js hosted with ❤ by GitHub
  • แปลง TTF เป็น SVG โดยทำตามขั้นตอนด้านล่าง:
  1. เลือกไฟล์ TTF ที่ต้องการแปลง
  2. สร้าง FileReader
  3. เรียกใช้ฟังก์ชัน AsposeFontConvertToSVG
  4. ตั้งชื่อไฟล์ที่ได้ใน json.fileNameResult
  5. หลังจากนั้น ตรวจสอบว่า json.errorCode เป็น 0 และเรียกข้อมูลลิงก์ของไฟล์ผลลัพธ์ ถ้า json.errorCode ไม่เป็น 0 รายละเอียดข้อผิดพลาดจะสามารถดูได้ใน json.errorText
  6. สุดท้าย ฟังก์ชัน DownloadFile จะสร้างลิงก์เพื่อให้ผู้ใช้สามารถดาวน์โหลดไฟล์ที่ได้ไปยังระบบปฏิบัติการของพวกเขา

ตัวอย่างโค้ดต่อไปนี้แสดง วิธีการแปลงไฟล์ฟอนต์ TrueType เป็นรูปแบบ SVG โดยใช้ JavaScript

var fTTF2SVG = function (e) {
const file_reader = new FileReader();
file_reader.onload = (event) => {
const json = AsposeFontConvert(event.target.result, e.target.files[0].name, Module.FontType.TTF, Module.FontSavingFormats.SVG);
if (json.errorCode == 0) document.getElementById('output').textContent = json.fileNameResult;
else document.getElementById('output').textContent = json.errorText;
DownloadFile(json.fileNameResult, "svg");
}
file_reader.readAsArrayBuffer(e.target.files[0]);
}
view raw convert-ttf-to-svg-in-javascript_convert.js hosted with ❤ by GitHub
แปลง TTF เป็น SVG ใน JavaScript

ลองแปลง TTF เป็น SVG ออนไลน์ฟรี

คุณยังสามารถแปลงไฟล์ TTF ของคุณเป็น SVG โดยใช้เครื่องมือ แปลง TTF เป็น SVG ออนไลน์ฟรี นี้ได้ คุณสามารถเข้าถึงได้ผ่านเว็บเบราว์เซอร์ใดก็ได้ในแพลตฟอร์มใดก็ได้

รับไลบรารีฟอนต์ JavaScript

คุณสามารถ รับใบอนุญาตชั่วคราวฟรี เพื่อทดลองใช้ไลบรารีฟอนต์ JavaScript โดยไม่มีข้อจำกัดในการประเมินผล

ฟอนต์ TrueType เป็น SVG - แหล่งข้อมูลฟรี

นอกเหนือจากการแปลงฟอนต์ TrueType เป็นรูปแบบ SVG แล้ว ให้สำรวจคุณสมบัติอื่น ๆ ของไลบรารีโดยใช้แหล่งข้อมูลด้านล่าง:

บทสรุป

สรุปได้ว่าการแปลง TTF เป็น SVG โดยใช้ JavaScript เป็นวิธีที่ทรงพลังในการนำฟอนต์แบบกำหนดเองเข้าสู่โครงการเว็บของคุณด้วยกราฟิกที่ปรับขนาดได้และคุณภาพสูง เราได้สำรวจวิธีการอ่านไฟล์ TTF, สกัดไกลฟ์ฟอนต์ และแปลงเป็นพาธ SVG โดยใช้ไลบรารีฟอนต์ JavaScript หากคุณมีคำถามใด ๆ โปรดติดต่อเราใน ฟอรัมสนับสนุนฟรีของเรา

ดูเพิ่มเติม