akira
/
tesseract.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added image preprocessing functions (rotate + save images)

dev/v4
Balearica 2 years ago
parent
5ff17fdeb1
commit
3678dbceae
7 changed files with 282 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      examples/browser/image-processing.html
  2. 5
      src/constants/imageType.js
  3. 9
      src/createWorker.js
  4. 16
      src/index.d.ts
  5. 136
      src/worker-script/index.js
  6. 56
      src/worker-script/utils/arrayBufferToBase64.js
  7. 6
      src/worker-script/utils/setImage.js

60
examples/browser/image-processing.html
Unescape View File

@ -0,0 +1,60 @@
<html>
<head>
<script src="/dist/tesseract.dev.js"></script>
<style>
.column {
float: left;
width: 20%;
padding: 5px;
}
</style>
</head>
<body>
<input type="file" id="uploader">
<div class="row">
<div class="column">
<p>Input Image</p>
<img id="imgInput" style="max-width:500px;">
</div>
<div class="column">
<p>Rotated, Original Color</p>
<img id="imgOriginal" style="max-width:500px;">
</div>
<div class="column">
<p>Rotated, Grey</p>
<img id="imgGrey" style="max-width:500px;">
</div>
<div class="column">
<p>Rotated, Binary</p>
<img id="imgBinary" style="max-width:500px;">
</div>
</div>
<script>
const recognize = async ({ target: { files } }) => {
document.getElementById("imgInput").src = URL.createObjectURL(files[0]);
const worker = Tesseract.createWorker({
corePath: '/tesseract-core-simd.wasm.js',
workerPath: "/dist/worker.dev.js"
});
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
await worker.initialize();
const ret = await worker.recognize(files[0], { saveImageOriginal: true, saveImageGrey: true, saveImageBinary: true, rotateAuto: true })
document.getElementById("imgOriginal").src = ret.data.imageOriginal;
document.getElementById("imgGrey").src = ret.data.imageGrey;
document.getElementById("imgBinary").src = ret.data.imageBinary;
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', recognize);
</script>
</body>
</html>

5
src/constants/imageType.js
Unescape View File

@ -0,0 +1,5 @@
module.exports = {
ORIGINAL: 0,
GREY: 1,
BINARY: 2,
};

9
src/createWorker.js
Unescape View File

@ -123,6 +123,14 @@ module.exports = (_options = {}) => {
})) }))
); );
const threshold = async (image, opts = {}, jobId) => (
startJob(createJob({
id: jobId,
action: 'threshold',
payload: { image: await loadImage(image), options: opts },
}))
);
const getPDF = (title = 'Tesseract OCR Result', textonly = false, jobId) => ( const getPDF = (title = 'Tesseract OCR Result', textonly = false, jobId) => (
startJob(createJob({ startJob(createJob({
id: jobId, id: jobId,
@ -191,6 +199,7 @@ module.exports = (_options = {}) => {
initialize, initialize,
setParameters, setParameters,
recognize, recognize,
threshold,
getPDF, getPDF,
detect, detect,
terminate, terminate,

16
src/index.d.ts vendored
Unescape View File

@ -22,7 +22,9 @@ declare namespace Tesseract {
loadLanguage(langs?: string, jobId?: string): Promise<ConfigResult> loadLanguage(langs?: string, jobId?: string): Promise<ConfigResult>
initialize(langs?: string, oem?: OEM, jobId?: string): Promise<ConfigResult> initialize(langs?: string, oem?: OEM, jobId?: string): Promise<ConfigResult>
setParameters(params: Partial<WorkerParams>, jobId?: string): Promise<ConfigResult> setParameters(params: Partial<WorkerParams>, jobId?: string): Promise<ConfigResult>
getImage(type: imageType): string
recognize(image: ImageLike, options?: Partial<RecognizeOptions>, jobId?: string): Promise<RecognizeResult> recognize(image: ImageLike, options?: Partial<RecognizeOptions>, jobId?: string): Promise<RecognizeResult>
threshold(image: ImageLike, options?: Partial<RecognizeOptions>, jobId?: string): Promise<RecognizeResult>
detect(image: ImageLike, jobId?: string): Promise<DetectResult> detect(image: ImageLike, jobId?: string): Promise<DetectResult>
terminate(jobId?: string): Promise<ConfigResult> terminate(jobId?: string): Promise<ConfigResult>
} }
@ -53,6 +55,11 @@ declare namespace Tesseract {
} }
interface RecognizeOptions { interface RecognizeOptions {
rectangle: Rectangle rectangle: Rectangle
saveImageOriginal: boolean
saveImageGrey: boolean
saveImageBinary: boolean
rotateAuto: boolean
rotateRadians: float
} }
interface ConfigResult { interface ConfigResult {
jobId: string jobId: string
@ -100,6 +107,11 @@ declare namespace Tesseract {
SPARSE_TEXT = '11', SPARSE_TEXT = '11',
SPARSE_TEXT_OSD = '12', SPARSE_TEXT_OSD = '12',
} }
const enum imageType {
ORIGINAL = 0,
GREY = 1,
BINARY = 2
}
type ImageLike = string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement type ImageLike = string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement
| CanvasRenderingContext2D | File | Blob | ImageData | Buffer; | CanvasRenderingContext2D | File | Blob | ImageData | Buffer;
interface Block { interface Block {
@ -213,6 +225,10 @@ declare namespace Tesseract {
box: string | null; box: string | null;
unlv: string | null; unlv: string | null;
sd: string | null; sd: string | null;
imageOriginal: string;
imageGrey: string;
imageBinary: string;
rotateRadians: number;
} }
} }

136
src/worker-script/index.js
Unescape View File

@ -15,6 +15,9 @@ const isWebWorker = require('../utils/getEnvironment')('type') === 'webworker';
const setImage = require('./utils/setImage'); const setImage = require('./utils/setImage');
const defaultParams = require('./constants/defaultParams'); const defaultParams = require('./constants/defaultParams');
const { log, setLogging } = require('../utils/log'); const { log, setLogging } = require('../utils/log');
const arrayBufferToBase64 = require('./utils/arrayBufferToBase64');
const imageType = require('../constants/imageType');
const PSM = require('../constants/PSM');
/* /*
* Tesseract Module returned by TesseractCore. * Tesseract Module returned by TesseractCore.
@ -197,14 +200,140 @@ const initialize = ({
} }
}; };
const recognize = ({ payload: { image, options: { rectangle: rec } } }, res) => { const getImage = (type) => {
api.WriteImage(type, '/image.png');
const pngBuffer = TessModule.FS.readFile('/image.png');
const pngStr = `data:image/png;base64,${arrayBufferToBase64(pngBuffer.buffer)}`;
TessModule.FS.unlink('/image.png');
return pngStr;
};
const recognize = ({
payload: {
image, options: {
rectangle: rec, saveImageOriginal, saveImageGrey, saveImageBinary, rotateAuto, rotateRadians,
},
},
}, res) => {
try { try {
const ptr = setImage(TessModule, api, image); // When the auto-rotate option is True, setImage is called with no angle,
// then the angle is calculated by Tesseract and then setImage is re-called.
// Otherwise, setImage is called once using the user-provided rotateRadiansFinal value.
let ptr;
let rotateRadiansFinal;
if (rotateAuto) {
// The angle is only detected if auto page segmentation is used
// Therefore, if this is not the mode specified by the user, it is enabled temporarily here
const psmInit = api.GetPageSegMode();
let psmEdit = false;
if (![PSM.AUTO, PSM.AUTO_ONLY, PSM.OSD].includes(psmInit)) {
psmEdit = true;
api.SetVariable('tessedit_pageseg_mode', String(PSM.AUTO));
}
ptr = setImage(TessModule, api, image);
api.FindLines();
const rotateRadiansCalc = api.GetAngle();
// Restore user-provided PSM setting
if (psmEdit) {
api.SetVariable('tessedit_pageseg_mode', String(psmInit));
}
// Small angles (<0.005 radians/~0.3 degrees) are ignored to save on runtime
if (Math.abs(rotateRadiansCalc) >= 0.005) {
rotateRadiansFinal = rotateRadiansCalc;
ptr = setImage(TessModule, api, image, rotateRadiansFinal);
} else {
// Image needs to be reset if run with different PSM setting earlier
if (psmEdit) {
ptr = setImage(TessModule, api, image);
}
rotateRadiansFinal = 0;
}
} else {
rotateRadiansFinal = rotateRadians || 0;
ptr = setImage(TessModule, api, image, rotateRadiansFinal);
}
if (typeof rec === 'object') { if (typeof rec === 'object') {
api.SetRectangle(rec.left, rec.top, rec.width, rec.height); api.SetRectangle(rec.left, rec.top, rec.width, rec.height);
} }
api.Recognize(null); api.Recognize(null);
res.resolve(dump(TessModule, api, params)); const result = dump(TessModule, api, params);
if (saveImageOriginal) {
result.imageOriginal = getImage(imageType.ORIGINAL);
}
if (saveImageGrey) {
result.imageGrey = getImage(imageType.GREY);
}
if (saveImageBinary) {
result.imageBinary = getImage(imageType.BINARY);
}
result.rotateRadians = rotateRadiansFinal;
res.resolve(result);
TessModule._free(ptr);
} catch (err) {
res.reject(err.toString());
}
};
// `threshold` is similar to `recognize` except it skips the recognition step
// Useful for getting rotated/binarized images without running recognition
const threshold = ({
payload: {
image, options: {
rectangle: rec, saveImageOriginal, saveImageGrey, saveImageBinary, rotateAuto, rotateRadians,
},
},
}, res) => {
try {
let ptr;
let rotateRadiansFinal;
if (rotateAuto) {
const psmInit = api.GetPageSegMode();
let psmEdit = false;
if (![PSM.AUTO, PSM.AUTO_ONLY, PSM.OSD].includes(psmInit)) {
psmEdit = true;
api.SetVariable('tessedit_pageseg_mode', String(PSM.AUTO));
}
ptr = setImage(TessModule, api, image);
api.FindLines();
const rotateRadiansCalc = api.GetAngle();
// Restore user-provided PSM setting
if (psmEdit) {
api.SetVariable('tessedit_pageseg_mode', String(psmInit));
}
// Small angles (<0.005 radians/~0.3 degrees) are ignored to save on runtime
if (Math.abs(rotateRadiansCalc) >= 0.005) {
rotateRadiansFinal = rotateRadiansCalc;
ptr = setImage(TessModule, api, image, rotateRadiansFinal);
} else {
rotateRadiansFinal = 0;
}
} else {
rotateRadiansFinal = rotateRadians || 0;
ptr = setImage(TessModule, api, image, rotateRadiansFinal);
}
if (typeof rec === 'object') {
api.SetRectangle(rec.left, rec.top, rec.width, rec.height);
}
const result = {};
if (saveImageOriginal) {
result.imageOriginal = getImage(imageType.ORIGINAL);
}
if (saveImageGrey) {
result.imageGrey = getImage(imageType.GREY);
}
if (saveImageBinary) {
result.imageBinary = getImage(imageType.BINARY);
}
result.rotateRadians = rotateRadiansFinal;
res.resolve(result);
TessModule._free(ptr); TessModule._free(ptr);
} catch (err) { } catch (err) {
res.reject(err.toString()); res.reject(err.toString());
@ -295,6 +424,7 @@ exports.dispatchHandlers = (packet, send) => {
initialize, initialize,
setParameters, setParameters,
recognize, recognize,
threshold,
getPDF, getPDF,
detect, detect,
terminate, terminate,

56
src/worker-script/utils/arrayBufferToBase64.js
Unescape View File

@ -0,0 +1,56 @@
// Copied from https://gist.github.com/jonleighton/958841
// Copyright 2011 Jon Leighton, MIT LICENSE
/* eslint no-bitwise: 0 */
module.exports = (arrayBuffer) => {
let base64 = '';
const encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
const bytes = new Uint8Array(arrayBuffer);
const { byteLength } = bytes;
const byteRemainder = byteLength % 3;
const mainLength = byteLength - byteRemainder;
let a; let b; let c; let
d;
let chunk;
// Main loop deals with bytes in chunks of 3
for (let i = 0; i < mainLength; i += 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
d = chunk & 63; // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
}
// Deal with the remaining bytes and padding
if (byteRemainder === 1) {
chunk = bytes[mainLength];
a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4; // 3 = 2^2 - 1
base64 += `${encodings[a] + encodings[b]}==`;
} else if (byteRemainder === 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2; // 15 = 2^4 - 1
base64 += `${encodings[a] + encodings[b] + encodings[c]}=`;
}
return base64;
};

6
src/worker-script/utils/setImage.js
Unescape View File

@ -8,7 +8,7 @@ const fileType = require('file-type');
* @function set image in tesseract for recognition * @function set image in tesseract for recognition
* @access public * @access public
*/ */
module.exports = (TessModule, api, image) => { module.exports = (TessModule, api, image, angle = 0) => {
const buf = Buffer.from(Array.from({ ...image, length: Object.keys(image).length })); const buf = Buffer.from(Array.from({ ...image, length: Object.keys(image).length }));
const type = fileType(buf); const type = fileType(buf);
let bytesPerPixel = 0; let bytesPerPixel = 0;
@ -55,9 +55,9 @@ module.exports = (TessModule, api, image) => {
* *
*/ */
if (data === null) { if (data === null) {
api.SetImage(pix, undefined, undefined, undefined, undefined, exif); api.SetImage(pix, undefined, undefined, undefined, undefined, exif, angle);
} else { } else {
api.SetImage(data, w, h, bytesPerPixel, w * bytesPerPixel, exif); api.SetImage(data, w, h, bytesPerPixel, w * bytesPerPixel, exif, angle);
} }
return data === null ? pix : data; return data === null ? pix : data;
}; };

Write Preview
Loading…
Cancel
Save