From 4791aef6b60efa6c011bcfcfd9a8f258a23119a3 Mon Sep 17 00:00:00 2001 From: Terence Date: Wed, 20 Jan 2021 11:52:01 +0800 Subject: [PATCH] prepare for deployment --- README.md | 6 +++-- src/Measurable.ts | 7 +++-- src/{LineBreakText.ts => UnicodeLineBreak.ts} | 2 +- src/index.ts | 20 +++++++++++++- tests/general.test.ts | 27 +++---------------- tests/lineBreakText.test.ts | 6 ++--- 6 files changed, 33 insertions(+), 35 deletions(-) rename src/{LineBreakText.ts => UnicodeLineBreak.ts} (97%) diff --git a/README.md b/README.md index 4669a6c..022770e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Ultimate Text To Image -Generate UTF8 texts into image with auto line break for all international language, including Chinese, Japanese, Korean, etc.. You can find a lot of similar library, but hardly find any library deal with utf8 texts with auto wrapping. +Generate Unicode texts into image with auto line break for all international language, including Chinese, Japanese, Korean, Russian, etc.. You can find a lot of similar library, but hardly find any library deal with utf8 texts with auto wrapping. Thanks to [linebreak](https://www.npmjs.com/package/linebreak), we can detect the correct line break and wrapping with ease. The actual depended package is [linebreak-next](https://www.npmjs.com/package/linebreak-next), which is compatible with Browser and provided by the collaborator of the original package. @@ -10,7 +10,7 @@ This library depends on [canvas](https://www.npmjs.com/package/canvas) for rende ![sample](https://i.imgur.com/ACesELy.png) # Feature Highlights -- auto wrap for utf8 texts (Chinese, Korean, Japanese, etc...) +- auto wrap for unicode texts (Chinese, Korean, Japanese, etc...) - support adding image with various position & repeat features - perfect alignment of texts by detecting the actual drawing pixels of glyphs - library works for NodeJs & browser, react component is provided @@ -337,6 +337,8 @@ new UltimateTextToImage("text", {fontFamily: "Noto Sans TC Thin"}); new UltimateTextToImage("text", {fontFamily: "Noto Sans TC Medium"}); ``` +** Testing above is done on Windows, the behaviors may be different on Linux + As a final conclusion, I recommend you to install the font into system and use actual font name to reduce any unclear outcome. You can still use registerFont, but be sure you did enough testing on it. diff --git a/src/Measurable.ts b/src/Measurable.ts index 3203709..60fa534 100644 --- a/src/Measurable.ts +++ b/src/Measurable.ts @@ -1,5 +1,5 @@ import {createCanvas} from "canvas"; -import {LineBreakText} from "./LineBreakText"; +import {UnicodeLineBreak} from "./UnicodeLineBreak"; import { IMeasurable, IMeasuredLine, @@ -232,9 +232,8 @@ export class Measurable { private testMeasureWords(options: ITestMeasuredWordGroupOptions) { const measuredWords: IMeasuredWord[] = []; - const lineBreakText = new LineBreakText(options.text); - - for (const item of lineBreakText) { + const unicodeLineBreak = new UnicodeLineBreak(options.text); + for (const item of unicodeLineBreak) { const word = item.word; const trimmedWord = word.trimRight(); const measuredWord = this.testMeasuredWord({...options, text: trimmedWord}); diff --git a/src/LineBreakText.ts b/src/UnicodeLineBreak.ts similarity index 97% rename from src/LineBreakText.ts rename to src/UnicodeLineBreak.ts index 6167a1f..80eefe7 100644 --- a/src/LineBreakText.ts +++ b/src/UnicodeLineBreak.ts @@ -3,7 +3,7 @@ import {ILineBreak, ILineBreakIterator, ILineBreakResult} from "./types"; // tslint:disable-next-line:no-var-requires variable-name const LineBreakNext = require("linebreak-next") as ILineBreak ; -export class LineBreakText { +export class UnicodeLineBreak { constructor(public text: string) { // } diff --git a/src/index.ts b/src/index.ts index 2fc3f88..d4abea8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,20 @@ import {getCanvasImage} from "./getCanvasImage"; import {HorizontalImage} from "./HorizontalImage"; import {registerFont} from "./registerFont"; -import {ICanvas, ICanvasImage, IContext2D, IImage, IRepeat} from "./types"; +import { + ICanvas, + ICanvasImage, + IContext2D, + IFontStyle, + IFontWeight, + IHorizontalImageOptions, + IImage, + IOptions, + IRepeat, + IVerticalImageOptions, +} from "./types"; import {UltimateTextToImage} from "./UltimateTextToImage"; +import {UnicodeLineBreak} from "./UnicodeLineBreak"; import {VerticalImage} from "./VerticalImage"; export { @@ -13,9 +25,15 @@ export { UltimateTextToImage, HorizontalImage, VerticalImage, + UnicodeLineBreak, // types IRepeat, + IFontWeight, + IFontStyle, + IOptions, + IVerticalImageOptions, + IHorizontalImageOptions, IImage, ICanvasImage, ICanvas, diff --git a/tests/general.test.ts b/tests/general.test.ts index ce06cbf..f46b525 100644 --- a/tests/general.test.ts +++ b/tests/general.test.ts @@ -215,40 +215,19 @@ describe("General", () => { textToImage.toFile(path.join(__dirname, "imageFont5.png")); // for windows, this is true, while in linux, the alias seems work properly - const hasFallback = bufferB3.equals(bufferC1); - // assert.isTrue(bufferB3.equals(bufferC1)); - // console.log("bufferC1", bufferC1.equals(bufferA1)); - // console.log("bufferC1", bufferC1.equals(bufferA2)); - // console.log("bufferC1", bufferC1.equals(bufferB1)); - // console.log("bufferC1", bufferC1.equals(bufferB2)); - - console.log(JSON.stringify(textToImage.measuredParagraph, null, 2)); + const fallbackExist = bufferB3.equals(bufferC1); // this is ok now textToImage.options.fontFamily = "Noto Sans TC Black"; const bufferC2 = textToImage.render().toBuffer(); textToImage.toFile(path.join(__dirname, "imageFont6.png")); - assert.equal(bufferC2.equals(bufferC1), !hasFallback); - - console.log("bufferC2", bufferC2.equals(bufferA1)); - console.log("bufferC2", bufferC2.equals(bufferA2)); - console.log("bufferC2", bufferC2.equals(bufferB1)); - console.log("bufferC2", bufferC2.equals(bufferB2)); - console.log("bufferC2", bufferC2.equals(bufferC1)); + assert.equal(bufferC2.equals(bufferC1), !fallbackExist); // use the alias name, fall back to regular textToImage.options.fontFamily = "Noto Sans TC Medium"; const bufferD1 = textToImage.render().toBuffer(); textToImage.toFile(path.join(__dirname, "imageFont7.png")); - assert.equal(bufferD1.equals(bufferB1), hasFallback); - - console.log("bufferD1", bufferD1.equals(bufferA1)); - console.log("bufferD1", bufferD1.equals(bufferA2)); - console.log("bufferD1", bufferD1.equals(bufferB1)); - console.log("bufferD1", bufferD1.equals(bufferB2)); - console.log("bufferD1", bufferD1.equals(bufferC1)); - console.log("bufferD1", bufferD1.equals(bufferC2)); - + assert.equal(bufferD1.equals(bufferB1), fallbackExist); }); it("vertical", async () => { diff --git a/tests/lineBreakText.test.ts b/tests/lineBreakText.test.ts index 04d80e2..2fc763e 100644 --- a/tests/lineBreakText.test.ts +++ b/tests/lineBreakText.test.ts @@ -1,5 +1,5 @@ import { assert, expect } from "chai"; -import {LineBreakText} from "../src/LineBreakText"; +import {UnicodeLineBreak} from "../src/UnicodeLineBreak"; describe("Text Line Break Test", () => { it("basic", async () => { @@ -14,8 +14,8 @@ describe("Text Line Break Test", () => { ]; for (const [text, testResults] of testCases) { - const lineBreakText = new LineBreakText(text); - const results = lineBreakText.getResults(); + const unicodeLineBreak = new UnicodeLineBreak(text); + const results = unicodeLineBreak.getResults(); assert.deepEqual(results.map(x => x.word), testResults); } });