chore: add web worker example

kekee000 · Apr 1, 2024 · 466d35f · 466d35f
1 parent 00f1c38
commit 466d35f
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 2 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -22,6 +22,7 @@
         <li><a href="demo/ttf2woff.html">ttf2woff.html</a></li>
         <li><a href="demo/ttfmin.html">ttfmin.html</a></li>
         <li><a href="demo/ttfparse.html">ttfparse.html</a></li>
+        <li><a href="demo/ttfparse-in-worker.html">ttfparse-in-worker.html</a></li>
         <li><a href="demo/ttfTableWriter.html">ttfTableWriter.html</a></li>
         <li><a href="demo/ttfwriter.html">ttfwriter.html</a></li>
         <li><a href="demo/woff2ttf.html">woff2ttf.html</a></li>

diff --git a/demo/js/ttfparse-in-worker.js b/demo/js/ttfparse-in-worker.js
@@ -0,0 +1,76 @@
+/**
+ * @file ttfparse.js
+ * @author mengke01
+ * @date
+ * @description
+ * ttf解析函数入口
+ */
+
+import TTFReader from 'fonteditor-core/ttf/ttfreader';
+import ajaxFile from 'fonteditor-core/common/ajaxFile';
+
+const worker = new Worker("../js/worker.js");
+
+
+function printResult(ttfData) {
+    const result = `glyphs: ${ttfData.glyf.length};
+ttfData keys:
+
+- ${Object.keys(ttfData).join('\n- ')}
+
+see detail in DevTools - console.
+`
+    $('#parse-result').val(result);
+}
+
+
+function onUpFileChange(e) {
+    let file = e.target.files[0];
+    let reader = new FileReader();
+    reader.onload = function (e) {
+        worker.postMessage({
+            type: file.name.match(/(?<=\.)(ttf|svg|woff2?|eot|otf)$/)[1],
+            binaryData: e.target.result
+        });
+    };
+
+    reader.onerror = function (e) {
+        console.error(e);
+    };
+
+    reader.readAsArrayBuffer(file);
+}
+
+let entry = {
+
+    /**
+     * 初始化
+     */
+    init() {
+        worker.onmessage = (e) => {
+            const ttfData = e.data;
+            printResult(ttfData);
+        };
+
+        let upFile = document.getElementById('upload-file');
+        upFile.addEventListener('change', onUpFileChange);
+
+        ajaxFile({
+            type: 'binary',
+            url: './test/tt0586m.ttf',
+            onSuccess(binaryData) {
+                worker.postMessage({
+                    type: 'ttf',
+                    binaryData
+                });
+            },
+            onError() {
+                console.error('error read file');
+            }
+        });
+
+
+    }
+};
+
+entry.init();
diff --git a/demo/js/ttfparse.js b/demo/js/ttfparse.js
@@ -10,6 +10,17 @@ import TTFReader from 'fonteditor-core/ttf/ttfreader';
 import TTF from 'fonteditor-core/ttf/ttf';
 import ajaxFile from 'fonteditor-core/common/ajaxFile';
 
+function printResult(ttfData) {
+    const result = `glyphs: ${ttfData.glyf.length};
+ttfData keys:
+
+- ${Object.keys(ttfData).join('\n- ')}
+
+see detail in DevTools - console.
+`
+    $('#parse-result').val(result);
+}
+
 function onUpFileChange(e) {
     let file = e.target.files[0];
     let reader = new FileReader();
@@ -21,7 +32,7 @@ function onUpFileChange(e) {
         });
         let ttfData = ttfReader.read(e.target.result);
         console.log(ttfData);
-
+        printResult(ttfData);
     };
 
     reader.onerror = function (e) {
@@ -50,6 +61,7 @@ let entry = {
                 });
                 let ttfData = ttfReader.read(binaryData);
                 console.log(ttfData);
+                printResult(ttfData);
             },
             onError() {
                 console.error('error read file');

diff --git a/demo/js/worker.js b/demo/js/worker.js
@@ -0,0 +1,23 @@
+/**
+ * parse in web worker
+ */
+
+import TTFReader from 'fonteditor-core/ttf/ttfreader';
+import svg2ttfobject from 'fonteditor-core/ttf/svg2ttfobject';
+
+onmessage = (e) => {
+    const {type, binaryData} = e.data;
+    let ttfData;
+    if (type === 'svg') {
+        var decoder = new TextDecoder("utf-8");
+        ttfData = svg2ttfobject(decoder.decode(binaryData));
+    }
+    else {
+        let ttfReader = new TTFReader({
+            hinting: true
+        });
+        ttfData = ttfReader.read(binaryData);
+    }
+    console.log('worker parsed', type, ttfData);
+    postMessage(ttfData);
+};
diff --git a/demo/ttfparse-in-worker.html b/demo/ttfparse-in-worker.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>font编辑器</title>
+    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+</head>
+<body>
+
+<input id="upload-file" type="file">
+
+<textarea style="display:block; width: 600px;height: 400px;" style="font-family: monospace;" id="parse-result"></textarea>
+</body>
+</html>
diff --git a/demo/ttfparse.html b/demo/ttfparse.html
@@ -9,6 +9,6 @@
 
 <input id="upload-file" type="file">
 
-
+<textarea style="display:block; width: 600px;height: 400px;" style="font-family: monospace;" id="parse-result"></textarea>
 </body>
 </html>