wasm font rendering

(cherry picked from commit 5ff2118)

Author: matmen

ImageScript.js

@@ -1,5 +1,6 @@
 import * as  png from './utils/png.js';
 import * as gif from './utils/gif.js';
+import * as fontlib from './utils/wasm/font.js';
 
 /**
  * Represents an image; provides utility functions
@@ -21,7 +22,9 @@ export class Image {
         if (height < 1)
             throw new RangeError('Image has to be at least 1 pixel high');
 
+        /** @private */
         this.__width__ = width;
+        /** @private */
         this.__height__ = height;
 
         /**
@@ -934,6 +937,46 @@ export class Image {
 
         return image;
     }
+
+    /**
+     * Wrap at individual characters. For use with {@link Image.renderText}
+     * @return {boolean}
+     */
+    static get WRAP_STYLE_CHAR() {
+        return true;
+    }
+
+    /**
+     * Wrap at word ends. For use with {@link Image.renderText}
+     * @return {boolean}
+     */
+    static get WRAP_STYLE_WORD() {
+        return false;
+    }
+
+    /**
+     * Creates a new image containing the rendered text.
+     * @param {Uint8Array} font .ttf font buffer to use
+     * @param {number} scale Font size to use
+     * @param {string} text Text to render
+     * @param {number} color Text color to use
+     * @param {number} wrapWidth Image width before wrapping
+     * @param {boolean} wrap_style Whether to break at words (WRAP_STYLE_WORD) or at characters (WRAP_STYLE_CHAR)
+     * @return {Promise<Image>} The rendered text
+     */
+    static async renderText(font, scale, text, color = 0xffffffff, wrapWidth = Infinity, wrap_style = this.WRAP_STYLE_WORD) {
+        const [r, g, b, a] = Image.colorToRGBA(color);
+        await fontlib.load(0, font, scale);
+        fontlib.render(0, 0, scale, r, g, b, text, wrapWidth === Infinity ? null : wrapWidth, wrap_style);
+        const buffer = fontlib.buffer(0);
+        const [width, height] = fontlib.meta(0);
+        fontlib.free(0);
+        const image = new Image(width, height);
+        image.bitmap.set(buffer);
+        image.opacity(a / 0xff);
+
+        return image;
+    }
 }
 
 /**

tests/font-1.png

@@ -0,0 +1,31 @@
+/*
+ Fonts sourced from:
+ https://www.1001fonts.com/carbon-font.html
+ https://www.1001fonts.com/ethnocentric-font.html
+ */
+
+import {Image} from '../ImageScript.js';
+import {equal} from "https://deno.land/std/bytes/mod.ts";
+
+const panic = message => {
+    console.error(message);
+    process.exit(1);
+};
+
+(async () => {
+    {
+        const font = await Image.renderText(await Deno.readFile('./tests/fonts/carbon phyber.ttf'), 128, 'ThE qUiCk');
+        const encoded = await font.encode();
+
+        const desired = await Deno.readFile('./tests/font-1.png');
+        if (!equal(desired, encoded)) panic('font 1 doesn\'t match');
+    }
+
+    {
+        const font = await Image.renderText(await Deno.readFile('./tests/fonts/ethnocentric rg.ttf'), 128, 'BrOwN fOx');
+        const encoded = await font.encode();
+
+        const desired = await Deno.readFile('./tests/font-2.png');
+        if (!equal(desired, encoded)) panic('font 2 doesn\'t match');
+    }
+})();

tests/font-2.png

@@ -0,0 +1,99 @@
+let wasm;
+
+{
+    const module = new WebAssembly.Module(await fetch('https://github.com/matmen/ImageScript/raw/deno/utils/wasm/font.wasm').then(r => r.arrayBuffer()));
+    const instance = new WebAssembly.Instance(module);
+
+    wasm = instance.exports;
+}
+
+let u8array_ref = new Uint8Array(wasm.memory.buffer);
+let i32array_ref = new Int32Array(wasm.memory.buffer);
+let u32array_ref = new Uint32Array(wasm.memory.buffer);
+
+const utf8encoder = new TextEncoder();
+
+function u8array() {
+    return u8array_ref.buffer === wasm.memory.buffer ? u8array_ref : (u8array_ref = new Uint8Array(wasm.memory.buffer));
+}
+
+function i32array() {
+    return i32array_ref.buffer === wasm.memory.buffer ? i32array_ref : (i32array_ref = new Int32Array(wasm.memory.buffer));
+}
+
+function u32array() {
+    return u32array_ref.buffer === wasm.memory.buffer ? u32array_ref : (u32array_ref = new Uint32Array(wasm.memory.buffer));
+}
+
+function ptr_to_u8array(ptr, len) {
+    return u8array().subarray(ptr, ptr + len);
+}
+
+function ptr_to_u32array(ptr, len) {
+    return u32array().subarray(ptr / 4, ptr / 4 + len);
+}
+
+function u8array_to_ptr(buffer) {
+    const ptr = wasm.__wbindgen_malloc(buffer.length);
+    u8array().set(buffer, ptr);
+
+    return ptr;
+}
+
+function string_to_ptr(string) {
+    let offset = 0;
+    let len = string.length;
+    let ptr = wasm.__wbindgen_malloc(string.length);
+
+    const u8 = u8array();
+    while (len > offset) {
+        const code = string.charCodeAt(offset);
+
+        if (code > 0x7F) break;
+        u8[ptr + offset++] = code;
+    }
+
+    if (offset !== len) {
+        if (offset !== 0) string = string.substring(offset);
+        ptr = wasm.__wbindgen_realloc(ptr, len, len = offset + string.length * 3);
+        const ret = utf8encoder.encodeInto(string, u8array().subarray(ptr + offset, ptr + len));
+
+        offset += ret.written;
+    }
+
+    return [ptr, offset];
+}
+
+const nullish = x => x == null;
+
+export function render(ptr, id, scale, r, g, b, text, max_width, wrap_style = false) {
+    const str = string_to_ptr(text);
+    wasm.render(ptr, id, scale, r, g, b, str[0], str[1], !nullish(max_width), max_width || 0, wrap_style);
+}
+
+export function buffer(id) {
+    wasm.buffer(8, id);
+    const i32 = i32array();
+    const slice = ptr_to_u8array(i32[2], i32[3]).slice();
+    wasm.__wbindgen_free(i32[2], i32[3]);
+
+    return slice;
+}
+
+export function meta(id) {
+    wasm.meta(8, id);
+    const i32 = i32array();
+    const slice = ptr_to_u32array(i32[2], i32[3]).slice();
+    wasm.__wbindgen_free(i32[2], 4 * i32[3]);
+
+    return slice;
+}
+
+export async function load(id, buffer, scale = 128) {
+    wasm = await wasm;
+    wasm.load(id, u8array_to_ptr(buffer), buffer.length, scale);
+}
+
+export function free(id) {
+    wasm.free(id);
+}