diff --git a/demo/index.html b/demo/index.html index 473aed3..8e12bdf 100644 --- a/demo/index.html +++ b/demo/index.html @@ -22,6 +22,7 @@
  • ttf2woff.html
  • ttfmin.html
  • ttfparse.html
  • +
  • ttfparse-in-worker.html
  • ttfTableWriter.html
  • ttfwriter.html
  • woff2ttf.html
  • diff --git a/demo/js/ttfparse-in-worker.js b/demo/js/ttfparse-in-worker.js new file mode 100644 index 0000000..ae30080 --- /dev/null +++ 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 index 4fafe84..d433d61 100644 --- 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 new file mode 100644 index 0000000..5ae4cad --- /dev/null +++ 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); +}; \ No newline at end of file diff --git a/demo/ttfparse-in-worker.html b/demo/ttfparse-in-worker.html new file mode 100644 index 0000000..373cc5e --- /dev/null +++ b/demo/ttfparse-in-worker.html @@ -0,0 +1,14 @@ + + + + + font编辑器 + + + + + + + + + diff --git a/demo/ttfparse.html b/demo/ttfparse.html index b56fa2e..373cc5e 100644 --- a/demo/ttfparse.html +++ b/demo/ttfparse.html @@ -9,6 +9,6 @@ - +