Mengonversi WOFF ke TTF dalam JavaScript

Mengonversi WOFF (Web Open Font Format) ke TTF (TrueType Font) sangat penting dalam beberapa kasus. Desainer dan pengembang sering perlu beralih antara format-format ini untuk kompatibilitas. WOFF dioptimalkan untuk penggunaan web, sementara TTF didukung secara luas di berbagai platform. Memahami cara mengonversi format-format ini dapat meningkatkan proyek Anda dan memperbaiki pengalaman pengguna. Dalam posting blog ini, kita akan belajar bagaimana mengonversi WOFF dan WOFF2 ke TTF menggunakan JavaScript.

Artikel ini mencakup topik-topik berikut:

Perpustakaan JavaScript untuk Mengonversi WOFF ke TTF

Aspose.Font untuk JavaScript menyederhanakan proses mengonversi WOFF ke TTF. Perpustakaan ini menyediakan API yang sederhana untuk manipulasi font. Ini mendukung berbagai format font, menjadikannya serbaguna untuk pengembang. Dengan Aspose.Font, Anda dapat dengan mudah mengonversi, membuat, dan mengelola font secara programatis.

Aspose.Font untuk JavaScript menawarkan beberapa fitur yang membuatnya ideal untuk mengonversi WOFF ke TTF:

  • Kemudahan Integrasi: Perpustakaan ini terintegrasi dengan lancar ke dalam aplikasi JavaScript yang ada.
  • Fleksibilitas: Ini mendukung beberapa format font, memungkinkan berbagai kasus penggunaan.
  • Kustomisasi Lanjutan: Pengembang dapat menyesuaikan properti font selama konversi.

Untuk memulai dengan Aspose.Font untuk JavaScript, silakan unduh perpustakaan dari sini. Anda juga dapat menginstalnya menggunakan perintah berikut:

PM> Install-Package Aspose.Font.Cpp

Mengonversi WOFF ke TTF dalam JavaScript

Kita dapat dengan mudah mengonversi font WOFF ke TTF dalam JavaScript dalam aplikasi web. Pertama, kita memuat file WOFF, kemudian mengonversinya ke TTF. Untuk menjaga UI utama tetap responsif, sebuah web worker menangani proses tersebut. Ini membuat konverter ramah pengguna, menyederhanakan proses, dan mendukung unduhan yang efisien.

Ikuti langkah-langkah ini untuk mengonversi WOFF ke TrueType dalam JavaScript:

  • Siapkan web worker dengan cuplikan kode ini:
/*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 fWOFFtoTTF = e => {
const file_reader = new FileReader();
file_reader.onload = event => {
/*Convert a WOFF fonts to TTF and save - Ask Web Worker*/
AsposeFontWebWorker.postMessage({ "operation": 'AsposeFontConvertToTTF', "params": [event.target.result, e.target.files[0].name, 'Module.FontType.WOFF'] }, [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-woff-to-ttf-in-javascript_webworker.js hosted with ❤ by GitHub
  • Konversi file WOFF ke TTF sebagai berikut:
  1. Pilih file WOFF.
  2. Buat objek FileReader.
  3. Gunakan fungsi AsposeFontConvertToTTF.
  4. Atur nama file keluaran di json.fileNameResult.
  5. Periksa apakah json.errorCode adalah 0. Jika ya, ambil tautan unduhan. Jika tidak, lihat json.errorText untuk kesalahan.
  6. Fungsi DownloadFile menyediakan tautan untuk mengunduh file TTF ke komputer Anda.

Cuplikan kode berikut menunjukkan cara mengonversi file font WOFF ke TTF dalam JavaScript.

var fWOFF2TTF = function (e) {
const file_reader = new FileReader();
file_reader.onload = (event) => {
const json = AsposeFontConvertToTTF(event.target.result, e.target.files[0].name, Module.FontType.WOFF, Module.FontSavingFormats.TTF);
if (json.errorCode == 0) document.getElementById('output').textContent = json.fileNameResult;
else document.getElementById('output').textContent = json.errorText;
DownloadFile(json.fileNameResult, "ttf");
}
file_reader.readAsArrayBuffer(e.target.files[0]);
}
view raw convert-woff-to-ttf-in-javascript_convert.js hosted with ❤ by GitHub
Mengonversi WOFF ke TTF dalam JavaScript

Mengonversi WOFF2 ke TTF dalam JavaScript

Demikian juga, kita juga dapat mengonversi WOFF2 ke TTF dalam JavaScript dengan mengikuti langkah-langkah yang disebutkan sebelumnya. Namun, kita hanya perlu memberikan file WOFF2 sumber sebagai input.

Cuplikan kode berikut menunjukkan cara mengonversi file font WOFF2 ke format TTF menggunakan 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 fWOFFtoTTF = e => {
const file_reader = new FileReader();
file_reader.onload = event => {
/*Convert a WOFF2 fonts to TTF and save - Ask Web Worker*/
AsposeFontWebWorker.postMessage({ "operation": 'AsposeFontConvertToTTF', "params": [event.target.result, e.target.files[0].name, 'Module.FontType.WOFF2'] }, [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-woff-to-ttf-in-javascript_webworker_woff2.js hosted with ❤ by GitHub
var fWOFF2TTF = function (e) {
const file_reader = new FileReader();
file_reader.onload = (event) => {
const json = AsposeFontConvertToTTF(event.target.result, e.target.files[0].name, Module.FontType.WOFF2, Module.FontSavingFormats.TTF);
if (json.errorCode == 0) document.getElementById('output').textContent = json.fileNameResult;
else document.getElementById('output').textContent = json.errorText;
DownloadFile(json.fileNameResult, "ttf");
}
file_reader.readAsArrayBuffer(e.target.files[0]);
}
view raw convert-woff-to-ttf-in-javascript_convert_woff2.js hosted with ❤ by GitHub

Dapatkan Lisensi Gratis

Kunjungi halaman lisensi sementara untuk mendapatkan lisensi sementara gratis. Sangat mudah dan cepat untuk memulai dengan Aspose, memungkinkan Anda menguji fitur-fitur mereka yang kuat tanpa komitmen apa pun.

WOFF ke TTF: Sumber Daya Gratis

Selain mengonversi WOFF atau WOFF2 ke TTF, kami menawarkan berbagai sumber daya untuk meningkatkan pemahaman Anda tentang manajemen dan konversi font. Lihat dokumentasi dan tutorial kami untuk wawasan lebih lanjut dan contoh praktis.

Kesimpulan

Dalam posting blog ini, kami menjelajahi cara mengonversi WOFF ke TTF dalam JavaScript menggunakan Aspose.Font untuk JavaScript. Perpustakaan ini menyederhanakan konversi font dan menawarkan fleksibilitas serta kustomisasi. Kami mendorong Anda untuk menjelajahi lebih lanjut tentang Aspose.Font untuk JavaScript untuk meningkatkan kemampuan manajemen font Anda.

Jika Anda memiliki pertanyaan atau membutuhkan bantuan lebih lanjut, silakan hubungi kami di forum dukungan gratis kami.

Lihat Juga