scribe.js-ocr 0.2.4 → 0.2.6

package/js/worker/compareOCRModule.js

@@ -2,11 +2,12 @@
 /* eslint-disable no-await-in-loop */
 
 import ocr from '../objects/ocrObjects.js';
-import { calcLineFontSize, calcWordFontSize } from '../utils/fontUtils.js';
+import { calcLineFontSize, calcWordFontSize, calcWordMetrics } from '../utils/fontUtils.js';
 import { getImageBitmap } from '../utils/imageUtils.js';
 import { drawWordActual, drawWordRender } from './renderWordCanvas.js';
 
-import { fontAll } from '../containers/fontContainer.js';
+import { FontCont } from '../containers/fontContainer.js';
+import { imageUtils } from '../objects/imageObjects.js';
 import { getRandomAlphanum } from '../utils/miscUtils.js';
 // import { CompDebug } from '../objects/imageObjects.js';
 
@@ -95,7 +96,7 @@ export const initCanvasNode = async () => {
     // The Node.js canvas package does not currently support worke threads
     // https://github.com/Automattic/node-canvas/issues/1394
     if (!isMainThread) throw new Error('node-canvas is not currently supported on worker threads.');
-    if (!fontAll.raw) throw new Error('Fonts must be defined before running this function.');
+    if (!FontCont.raw) throw new Error('Fonts must be defined before running this function.');
 
     const { writeFile } = await import('fs');
     const { promisify } = await import('util');
@@ -128,7 +129,7 @@ export const initCanvasNode = async () => {
 
     // All fonts must be registered before the canvas is created, so all raw and optimized fonts are loaded.
     // Even when using optimized fonts, at least one raw font is needed to compare against optimized version.
-    for (const [key1, value1] of Object.entries(fontAll.raw)) {
+    for (const [key1, value1] of Object.entries(FontCont.raw)) {
       if (['Default', 'SansDefault', 'SerifDefault'].includes(key1)) continue;
       for (const [key2, value2] of Object.entries(value1)) {
         await registerFontObj(value2);
@@ -136,10 +137,11 @@ export const initCanvasNode = async () => {
     }
 
     // This function is used before font optimization is complete, so `fontAll.opt` does not exist yet.
-    if (fontAll.optInitial) {
-      for (const [key1, value1] of Object.entries(fontAll.optInitial)) {
-        if (['Default', 'SansDefault', 'SerifDefault'].includes(key1)) continue;
+    if (FontCont.opt) {
+      for (const [key1, value1] of Object.entries(FontCont.opt)) {
+        if (['Default', 'SansDefault', 'SerifDefault'].includes(key1) || !value1) continue;
         for (const [key2, value2] of Object.entries(value1)) {
+          if (!value2) continue;
           await registerFontObj(value2);
         }
       }
@@ -202,14 +204,13 @@ export async function evalWords({
 
   const binaryImageBit = await getImageBitmap(binaryImage);
 
-  if (!fontAll.active) throw new Error('Fonts must be defined before running this function.');
+  if (!FontCont.raw) throw new Error('Fonts must be defined before running this function.');
   if (!calcCtx) throw new Error('Canvases must be defined before running this function.');
 
   const view = options?.view === undefined ? false : options?.view;
   const useABaseline = options?.useABaseline === undefined ? true : options?.useABaseline;
 
   const cosAngle = Math.cos(angle * -1 * (Math.PI / 180)) || 1;
-  const sinAngle = Math.sin(angle * -1 * (Math.PI / 180)) || 0;
 
   // All words are assumed to be on the same line
   const linebox = wordsA[0].line.bbox;
@@ -237,15 +238,12 @@ export async function evalWords({
 
   // Draw the words in wordsA
   let x0 = wordsA[0].bbox.left;
-  let y0 = linebox.bottom + baselineA[1] + baselineA[0] * (wordsA[0].bbox.left - linebox.left);
+  const y0 = linebox.bottom + baselineA[1] + baselineA[0] * (wordsA[0].bbox.left - linebox.left);
   for (let i = 0; i < wordsA.length; i++) {
     const word = wordsA[i];
     const wordIBox = word.bbox;
-    const baselineY = linebox.bottom + baselineA[1] + baselineA[0] * (wordIBox.left - linebox.left);
-    const x = wordIBox.left;
-    const y = word.sup || word.dropcap ? wordIBox.bottom : baselineY;
 
-    const offsetX = (x - x0) * cosAngle - sinAngle * (y - y0);
+    const offsetX = (wordIBox.left - x0) / cosAngle;
 
     await drawWordRender(calcCtx, word, offsetX, cropY, ctxView, Boolean(angle));
   }
@@ -296,15 +294,10 @@ export async function evalWords({
       // Set style to whatever it is for wordsA.  This is based on the assumption that "A" is Tesseract Legacy and "B" is Tesseract LSTM (which does not have useful style info).
       word.style = wordsA[0].style;
 
-      const baselineY = linebox.bottom + baselineB[1] + baselineB[0] * (word.bbox.left - linebox.left);
       if (i === 0) {
         x0 = word.bbox.left;
-        y0 = baselineY;
       }
-      const x = word.bbox.left;
-      const y = word.sup || word.dropcap ? word.bbox.bottom : baselineY;
-
-      const offsetX = (x - x0) * cosAngle - sinAngle * (y - y0);
+      const offsetX = (word.bbox.left - x0) / cosAngle;
 
       await drawWordRender(calcCtx, word, offsetX, cropY, ctxView, Boolean(angle));
     }
@@ -435,7 +428,7 @@ async function penalizeWord(wordObjs) {
     const wordTextArr = wordStr.split('');
     const wordFontSize = calcLineFontSize(word.line);
 
-    const fontI = fontAll.getWordFont(word);
+    const fontI = FontCont.getWordFont(word);
     const fontOpentypeI = fontI.opentype;
 
     // These calculations differ from the standard word width calculations,
@@ -719,78 +712,111 @@ export async function compareOCRPageImp({
                   continue;
                 }
 
-                let hocrAError = 0;
-                let hocrBError = 0;
+                let hocrAError = 1;
+                let hocrBError = 1;
+                let hocrAAltError = 1;
 
                 if (!evalConflicts) {
-                  hocrAError = 1;
+                  hocrBError = 0;
                 } else if (oneToOne) {
-                  // TODO: Figure out how to compare between small caps/non small-caps words (this is the only relevant style as it is the only style LSTM detects)
+                  // Some common patterns detected by Tesseract Legacy are so implausible that they are automatically rejected.
+                  if (legacyLSTMComb && rejectWordLegacy(wordA.text, wordB.text)) {
+                    hocrBError = 0;
+                  // If the top choice out of the Tesseract Legacy classifier (but not entire model) is the same as the Tesseract LSTM choice, use the LSTM choice.
+                  // This condition is common when the Legacy model improperly applies a dictionary "correction" to a word that was already correct.
+                  } else if (legacyLSTMComb && wordA.textAlt && wordA.textAlt === wordB.text) {
+                    hocrBError = 0;
+                  // Otherwise, the words are compared visually.
+                  } else {
+                    // TODO: Figure out how to compare between small caps/non small-caps words (this is the only relevant style as it is the only style LSTM detects)
+                    // Clone hocrAWord and set text content equal to hocrBWord
+                    const wordAClone = ocr.cloneWord(wordA);
+                    wordAClone.text = wordB.text;
+
+                    if (wordB.smallCaps && !wordA.smallCaps) {
+                      wordAClone.smallCaps = true;
+                      wordAClone.size = calcWordFontSize(wordB);
+                    }
 
-                  // Clone hocrAWord and set text content equal to hocrBWord
-                  const wordAClone = ocr.cloneWord(wordA);
-                  wordAClone.text = wordB.text;
+                    const evalRes = await evalWords({
+                      wordsA: [wordA], wordsB: [wordAClone], binaryImage: binaryImageBit, angle: imgAngle, imgDims, options: { view: Boolean(debugLabel) },
+                    });
 
-                  if (wordB.smallCaps && !wordA.smallCaps) {
-                    wordAClone.smallCaps = true;
-                    wordAClone.size = calcWordFontSize(wordB);
-                  }
+                    hocrAError = evalRes.metricA + (await penalizeWord([wordA]));
+                    hocrBError = evalRes.metricB + (await penalizeWord([wordB]));
 
-                  const evalRes = await evalWords({
-                    wordsA: [wordA], wordsB: [wordAClone], binaryImage: binaryImageBit, angle: imgAngle, imgDims, options: { view: Boolean(debugLabel) },
-                  });
+                    // Reject Tesseract Legacy word if appropriate
+                    if (legacyLSTMComb && rejectWordLegacy(wordA.text, wordB.text)) hocrBError = 0;
 
-                  hocrAError = evalRes.metricA + (await penalizeWord([wordA]));
-                  hocrBError = evalRes.metricB + (await penalizeWord([wordB]));
+                    // The alternative word from Tesseract legacy is tested if both other options are rejected.
+                    // This can be useful for relatively high-quality scans of non-dictionary words, which both the LSTM model and the Legacy model (after dictionary correction) may fail on,
+                    // with the raw results from the Legacy classifier being the most accurate.
+                    if (legacyLSTMComb && hocrAError > 0.5 && hocrBError > 0.5 && wordA.textAlt && wordA.textAlt !== wordB.text) {
+                      wordAClone.text = wordA.textAlt;
 
-                  // Reject Tesseract Legacy word if appropriate
-                  if (legacyLSTMComb && rejectWordLegacy(wordA.text, wordB.text)) hocrAError = 1;
+                      // This would run faster if it was built into the original evalWords function, but this case should be rare enough that it doesn't matter.
+                      const evalResAlt = await evalWords({
+                        wordsA: [wordAClone], binaryImage: binaryImageBit, angle: imgAngle, imgDims, options: { view: Boolean(debugLabel) },
+                      });
 
-                  if (evalRes.debug) {
-                    const debugObj = evalRes.debug;
-                    debugObj.errorAdjA = hocrAError;
-                    debugObj.errorAdjB = hocrBError;
+                      hocrAAltError = evalResAlt.metricA + (await penalizeWord([wordAClone]));
 
-                    debugImg.push(debugObj);
+                      // To use the alt word, the error must be less than 0.5, and the alt word but be at least 0.1 better than both other options.
+                      if (hocrAAltError >= 0.5 || (hocrAError - hocrAAltError) < 0.1 || (hocrBError - hocrAAltError) < 0.1) hocrAAltError = 1;
+                    }
+
+                    if (evalRes.debug) {
+                      const debugObj = evalRes.debug;
+                      debugObj.errorAdjA = hocrAError;
+                      debugObj.errorAdjB = hocrBError;
+
+                      debugImg.push(debugObj);
+                    }
                   }
                 } else if (twoToOne) {
-                  const evalRes = await evalWords({
-                    wordsA: wordsAArr, wordsB: wordsBArr, binaryImage: binaryImageBit, angle: imgAngle, imgDims, options: { view: Boolean(debugLabel) },
-                  });
-
                   const wordsAText = wordsAArr.map((x) => x.text).join('');
                   const wordsBText = wordsBArr.map((x) => x.text).join('');
 
-                  // The option with more words has a small penalty added, as otherwise words incorrectly split will often score slightly better (due to more precise positioning)
-                  hocrAError = evalRes.metricA + (wordsAArr.length - 1) * 0.025 + (await penalizeWord(wordsAArr));
-                  hocrBError = evalRes.metricB + (wordsBArr.length - 1) * 0.025 + (await penalizeWord(wordsBArr));
-
-                  // An additional penalty is added to the option with more words when (1) the text is the same in both options and (2) at least one word has no letters.
-                  // This has 2 primary motivations:
-                  //  1. Tesseract Legacy often splits numbers into separate words.
-                  //    For example, the "-" in a negative number may be a different word, or the digits before and after the decimal point may be split into separate words.
-                  //    TODO: It may be worth investigating if this issue can be improved in the engine.
-                  //  1. Punctuation characters should not be their own word (e.g. quotes should come before/after alphanumeric characters)
-                  if (wordsAText === wordsBText) {
-                    if (wordsAArr.map((x) => /[a-z]/i.test(x.text)).filter((x) => !x).length > 0 || wordsBArr.map((x) => /[a-z]/i.test(x.text)).filter((x) => !x).length > 0) {
-                      hocrAError += (wordsAArr.length - 1) * 0.05;
-                      hocrBError += (wordsBArr.length - 1) * 0.05;
+                  if (legacyLSTMComb && rejectWordLegacy(wordsAText, wordsBText)) {
+                    hocrBError = 0;
+                  } else {
+                    const evalRes = await evalWords({
+                      wordsA: wordsAArr, wordsB: wordsBArr, binaryImage: binaryImageBit, angle: imgAngle, imgDims, options: { view: Boolean(debugLabel) },
+                    });
+
+                    // The option with more words has a small penalty added, as otherwise words incorrectly split will often score slightly better (due to more precise positioning)
+                    hocrAError = evalRes.metricA + (wordsAArr.length - 1) * 0.025 + (await penalizeWord(wordsAArr));
+                    hocrBError = evalRes.metricB + (wordsBArr.length - 1) * 0.025 + (await penalizeWord(wordsBArr));
+
+                    // An additional penalty is added to the option with more words when (1) the text is the same in both options and (2) at least one word has no letters.
+                    // This has 2 primary motivations:
+                    //  1. Tesseract Legacy often splits numbers into separate words.
+                    //    For example, the "-" in a negative number may be a different word, or the digits before and after the decimal point may be split into separate words.
+                    //    TODO: It may be worth investigating if this issue can be improved in the engine.
+                    //  1. Punctuation characters should not be their own word (e.g. quotes should come before/after alphanumeric characters)
+                    if (wordsAText === wordsBText) {
+                      if (wordsAArr.map((x) => /[a-z]/i.test(x.text)).filter((x) => !x).length > 0 || wordsBArr.map((x) => /[a-z]/i.test(x.text)).filter((x) => !x).length > 0) {
+                        hocrAError += (wordsAArr.length - 1) * 0.05;
+                        hocrBError += (wordsBArr.length - 1) * 0.05;
+                      }
                     }
-                  }
 
-                  // Reject Tesseract Legacy word if appropriate
-                  if (legacyLSTMComb && rejectWordLegacy(wordsAText, wordsBText)) hocrAError = 1;
+                    // Reject Tesseract Legacy word if appropriate
+                    if (legacyLSTMComb && rejectWordLegacy(wordsAText, wordsBText)) hocrBError = 0;
 
-                  if (evalRes.debug) {
-                    const debugObj = evalRes.debug;
-                    debugObj.errorAdjA = hocrAError;
-                    debugObj.errorAdjB = hocrBError;
+                    if (evalRes.debug) {
+                      const debugObj = evalRes.debug;
+                      debugObj.errorAdjA = hocrAError;
+                      debugObj.errorAdjB = hocrBError;
 
-                    debugImg.push(debugObj);
+                      debugImg.push(debugObj);
+                    }
                   }
                 }
 
-                if (hocrBError < hocrAError) {
+                // The LSTM model is known to be more accurate on average.
+                // Therefore, if both metrics are terrible (indicating the word isn't lined up at all), the LSTM word is used.
+                if ((hocrBError < hocrAError && hocrBError < hocrAAltError) || (legacyLSTMComb && hocrAError > 0.5 && hocrAAltError > 0.5)) {
                   const skip = ['eg', 'ie'].includes(wordA.text.replace(/\W/g, ''));
 
                   if (!skip) {
@@ -843,6 +869,10 @@ export async function compareOCRPageImp({
                       break;
                     }
                   }
+                } else if (wordA.textAlt && hocrAAltError < 0.5 && hocrAAltError < hocrAError) {
+                  lineWordsEditedNew += 1;
+                  if (wordA.text.length !== wordA.textAlt.length) wordA.chars = null;
+                  wordA.text = wordA.textAlt;
                 }
               }
             }
@@ -891,11 +921,37 @@ export async function compareOCRPageImp({
   // Note: These metrics leave open the door for some fringe edge cases.
   // For example,
 
+  const hocrBAll = {};
+  ocr.getPageWords(pageB).forEach((x) => {
+    hocrBAll[x.id] = 1;
+  });
+
+  const hocrAAll = {};
+  ocr.getPageWords(pageAInt).forEach((x) => {
+    hocrAAll[x.id] = 1;
+  });
+
+  // Delete any punctuation-only words from the stats if they are being ignored.
+  if (ignorePunct) {
+    const punctOnlyIDsA = ocr.getPageWords(pageA).filter((x) => !x.text.replace(/[\W_]/g, '')).map((x) => x.id);
+    punctOnlyIDsA.forEach((x) => {
+      delete hocrAAll[x];
+      delete hocrAOverlap[x];
+      delete hocrACorrect[x];
+    });
+    const punctOnlyIDsB = ocr.getPageWords(pageB).filter((x) => !x.text.replace(/[\W_]/g, '')).map((x) => x.id);
+    punctOnlyIDsB.forEach((x) => {
+      delete hocrBAll[x];
+      delete hocrBOverlap[x];
+      delete hocrBCorrect[x];
+    });
+  }
+
   // Number of words in ground truth
-  const totalCountB = ocr.getPageWords(pageB).length;
+  const totalCountB = Object.keys(hocrBAll).length;
 
   // Number of words in candidate OCR
-  const totalCountA = ocr.getPageWords(pageAInt).length;
+  const totalCountA = Object.keys(hocrAAll).length;
 
   // Number of words in ground truth with any overlap with candidate OCR
   const overlapCountB = Object.keys(hocrBOverlap).length;
@@ -1053,7 +1109,7 @@ export async function evalPageBase({
 
   const binaryImageBit = binaryImage.imageBitmap || await getImageBitmap(binaryImage.src);
 
-  if (!fontAll.active) throw new Error('Fonts must be defined before running this function.');
+  if (!FontCont.raw) throw new Error('Fonts must be defined before running this function.');
   if (!calcCtx) throw new Error('Canvases must be defined before running this function.');
 
   let metricTotal = 0;
@@ -1092,16 +1148,31 @@ export async function evalPageBase({
  * @param {import('../containers/imageContainer.js').ImageWrapper} params.binaryImage
  * @param {PageMetrics} params.pageMetricsObj
  * @param {string} params.font
+ * @param {boolean} [params.opt=false] - Whether to use the optimized font set
  * @returns
  */
 export async function evalPageFont({
-  page, binaryImage, pageMetricsObj, font,
+  page, binaryImage, pageMetricsObj, font, opt = false,
 }) {
-/**
+  const enableOptSave = FontCont.enableOpt;
+  const forceOptSave = FontCont.forceOpt;
+
+  // Allowing the font to be set here allows for better performance during font optimization compared to using the `enableFontOpt` function.
+  // This is because the `enableFontOpt` function requires a response from the main thread and *every* worker before completing, which leads to non-trivial waiting time.
+  if (opt === true) {
+    if (!FontCont.opt) throw new Error('Optimized fonts requested but not defined.');
+    FontCont.forceOpt = true;
+  } else if (opt === false) {
+    if (!FontCont.raw) throw new Error('Raw fonts requested but not defined.');
+    FontCont.enableOpt = false;
+    FontCont.forceOpt = false;
+  }
+
+  /**
  * @param {OcrLine} ocrLineJ
  */
   const transformLineFont = (ocrLineJ) => {
-    if (!fontAll.active) throw new Error('Fonts must be defined before running this function.');
+    if (!FontCont.raw) throw new Error('Fonts must be defined before running this function.');
 
     if (!ocrLineJ.words[0]) {
       console.log('Line has 0 words, this should not happen.');
@@ -1109,9 +1180,9 @@ export async function evalPageFont({
     }
 
     // If the font is not set for a specific word, whether it is assumed sans/serif will be determined by the default font.
-    const lineFontType = ocrLineJ.words[0].font ? fontAll.getWordFont(ocrLineJ.words[0]).type : fontAll.getFont('Default').type;
+    const lineFontType = ocrLineJ.words[0].font ? FontCont.getWordFont(ocrLineJ.words[0]).type : FontCont.getFont('Default').type;
 
-    if (fontAll.active[font].normal.type !== lineFontType) return null;
+    if (FontCont.raw[font].normal.type !== lineFontType) return null;
 
     const ocrLineJClone = ocr.cloneLine(ocrLineJ);
 
@@ -1122,9 +1193,14 @@ export async function evalPageFont({
     return ocrLineJClone;
   };
 
-  return await evalPageBase({
+  const res = await evalPageBase({
     page, binaryImage, pageMetricsObj, func: transformLineFont,
   });
+
+  FontCont.enableOpt = enableOptSave;
+  FontCont.forceOpt = forceOptSave;
+
+  return res;
 }
 
 /**
@@ -1157,7 +1233,7 @@ export async function nudgePageBase({
 
   const binaryImageBit = await getImageBitmap(binaryImage);
 
-  if (!fontAll.active) throw new Error('Fonts must be defined before running this function.');
+  if (!FontCont.raw) throw new Error('Fonts must be defined before running this function.');
   if (!calcCtx) throw new Error('Canvases must be defined before running this function.');
 
   let improveCt = 0;
@@ -1249,3 +1325,125 @@ export async function nudgePageBaseline({
     page, binaryImage, imageRotated, imageUpscaled, pageMetricsObj, func, view,
   });
 }
+
+/**
+ * Render a page to a canvas.
+ * This function is a WIP and not all options are implemented.
+ * @param {Object} args
+ * @param {OcrPage} args.page - Page to render.
+ * @param {import('../containers/imageContainer.js').ImageWrapper} args.image
+ * @param {dims} [args.pageDims] - Dimensions of page.
+ * @param {?number} [args.angle=0] - Angle of page.
+ * @param {("proof" | "invis" | "ebook" | "eval")} [args.displayMode='proof'] - Display mode.
+ * @param {number} [args.confThreshMed=75] - Threshold above which words are medium-confidence (0-100).
+ * @param {number} [args.confThreshHigh=85] - Threshold above which words are high-confidence (0-100).
+ * @returns {Promise<Blob>}
+ *
+ * TODO: This function does not belong here, however it is in this file because this is where the canvases live.
+ * Think about how to refactor--the canvases within workers probably belong in their own container.
+ *
+ */
+export const renderPageStaticImp = async ({
+  page, image, angle = 0, displayMode = 'proof', confThreshMed = 75, confThreshHigh = 85,
+}) => {
+  viewCtx0.save();
+
+  if (image) {
+    const dims = imageUtils.getDims(image);
+    viewCtx0.canvas.height = dims.height;
+    viewCtx0.canvas.width = dims.width;
+
+    const imageBit = await getImageBitmap(image.src);
+
+    viewCtx0.drawImage(imageBit, 0, 0);
+  } else {
+    viewCtx0.canvas.height = page.dims.height;
+    viewCtx0.canvas.width = page.dims.width;
+  }
+
+  angle = angle ?? 0;
+
+  viewCtx0.textBaseline = 'alphabetic';
+
+  const sinAngle = Math.sin(angle * (Math.PI / 180));
+  const cosAngle = Math.cos(angle * (Math.PI / 180));
+
+  for (const lineObj of page.lines) {
+    const angleAdjLine = image.rotated ? ocr.calcLineStartAngleAdj(lineObj) : { x: 0, y: 0 };
+
+    const baselineY = lineObj.bbox.bottom + lineObj.baseline[1] + angleAdjLine.y;
+    const lineLeftAdj = lineObj.bbox.left + angleAdjLine.x;
+
+    const rotateText = !image?.rotated;
+
+    if (rotateText) {
+      viewCtx0.setTransform(cosAngle, sinAngle, -sinAngle, cosAngle, lineLeftAdj, baselineY);
+    } else {
+      viewCtx0.setTransform(1, 0, 0, 1, lineLeftAdj, baselineY);
+    }
+
+    for (const wordObj of lineObj.words) {
+      if (!wordObj.text) continue;
+
+      const { fill, opacity } = ocr.getWordFillOpacity(wordObj, displayMode, confThreshMed, confThreshHigh);
+
+      viewCtx0.fillStyle = fill;
+
+      const angleAdjWord = wordObj.sup ? ocr.calcWordAngleAdj(wordObj) : { x: 0, y: 0 };
+
+      // TODO: Test whether the math here is correct for drop caps.
+      let ts = 0;
+      if (wordObj.sup) {
+        ts = (lineObj.bbox.bottom + lineObj.baseline[1] + angleAdjLine.y) - (wordObj.bbox.bottom + angleAdjLine.y + angleAdjWord.y);
+      } else if (wordObj.dropcap) {
+        ts = (lineObj.bbox.bottom + lineObj.baseline[1]) - wordObj.bbox.bottom + angleAdjLine.y + angleAdjWord.y;
+      } else {
+        ts = 0;
+      }
+
+      const width = (wordObj.bbox.left - wordObj.line.bbox.left) / cosAngle;
+
+      const visualLeft = width + angleAdjWord.x;
+
+      const wordMetrics = calcWordMetrics(wordObj);
+      const advanceArr = wordMetrics.advanceArr;
+      const kerningArr = wordMetrics.kerningArr;
+      const charSpacing = wordMetrics.charSpacing;
+      const wordFontSize = wordMetrics.fontSize;
+      const leftSideBearing = wordMetrics.leftSideBearing;
+
+      const advanceArrTotal = [];
+      for (let i = 0; i < advanceArr.length; i++) {
+        let leftI = 0;
+        leftI += advanceArr[i] || 0;
+        leftI += kerningArr[i] || 0;
+        leftI += charSpacing || 0;
+        advanceArrTotal.push(leftI);
+      }
+
+      const font = FontCont.getWordFont(wordObj);
+      viewCtx0.font = `${font.fontFaceStyle} ${font.fontFaceWeight} ${wordFontSize}px ${font.fontFaceName}`;
+      let leftI = wordObj.visualCoords ? visualLeft - leftSideBearing : visualLeft;
+      for (let i = 0; i < wordMetrics.charArr.length; i++) {
+        let charI = wordMetrics.charArr[i];
+
+        if (wordObj.smallCaps) {
+          if (charI === charI.toUpperCase()) {
+            viewCtx0.font = `${font.fontFaceStyle} ${font.fontFaceWeight} ${wordFontSize}px ${font.fontFaceName}`;
+          } else {
+            charI = charI.toUpperCase();
+            viewCtx0.font = `${font.fontFaceStyle} ${font.fontFaceWeight} ${wordFontSize * font.smallCapsMult}px ${font.fontFaceName}`;
+          }
+        }
+
+        viewCtx0.fillText(charI, leftI, -ts);
+        leftI += advanceArrTotal[i];
+      }
+    }
+  }
+
+  const img = typeof process === 'undefined' ? await viewCtx0.canvas.convertToBlob() : await viewCtx0.canvas.toBuffer('image/png');
+
+  viewCtx0.restore();
+  return img;
+};