Skip to content

Commit

Permalink
prepare for deployment
Browse files Browse the repository at this point in the history
  • Loading branch information
terence410 committed Jan 20, 2021
1 parent 9c7e997 commit 4791aef
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 35 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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
Expand Down Expand Up @@ -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.

Expand Down
7 changes: 3 additions & 4 deletions src/Measurable.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {createCanvas} from "canvas";
import {LineBreakText} from "./LineBreakText";
import {UnicodeLineBreak} from "./UnicodeLineBreak";
import {
IMeasurable,
IMeasuredLine,
Expand Down Expand Up @@ -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});
Expand Down
2 changes: 1 addition & 1 deletion src/LineBreakText.ts → src/UnicodeLineBreak.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
//
}
Expand Down
20 changes: 19 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -13,9 +25,15 @@ export {
UltimateTextToImage,
HorizontalImage,
VerticalImage,
UnicodeLineBreak,

// types
IRepeat,
IFontWeight,
IFontStyle,
IOptions,
IVerticalImageOptions,
IHorizontalImageOptions,
IImage,
ICanvasImage,
ICanvas,
Expand Down
27 changes: 3 additions & 24 deletions tests/general.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
6 changes: 3 additions & 3 deletions tests/lineBreakText.test.ts
Original file line number Diff line number Diff line change
@@ -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 () => {
Expand All @@ -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);
}
});
Expand Down

0 comments on commit 4791aef

Please sign in to comment.