Spaces:
Sleeping
Sleeping
File size: 2,537 Bytes
797cbb8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
"use client"
import { createWorker } from "tesseract.js"
import { loadImageToCanvas } from "./loadImageToCanvas";
export async function replaceTextInSpeechBubbles(image: string, customText: string) {
console.log('creating OCR worker to find bubbles inside', image);
const worker = await createWorker({
logger: (info) => {
console.log(info)
},
});
const canvas = await loadImageToCanvas(image)
const ctx = canvas.getContext('2d')!;
try {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data } = await worker.recognize(canvas);
const lines = data.lines || [];
// Draw the lines on the image
ctx.fillStyle = "white";
lines.forEach((line) => {
ctx.fillRect(line.bbox.x0, line.bbox.y0, line.bbox.x1 - line.bbox.x0, line.bbox.y1 - line.bbox.y0);
const bubbleWidth = line.bbox.x1 - line.bbox.x0;
const bubbleHeight = line.bbox.y1 - line.bbox.y0;
let fontSize = 18;
ctx.font = `${fontSize}px Arial`;
/*
while (
ctx.measureText(customText).width > bubbleWidth || fontSize * 1.2 // line height
> bubbleHeight) {
fontSize -= 1;
ctx.font = `${fontSize}px Arial`;
}
const lines = wrapText(ctx, customText, line.bbox.x0, line.bbox.y0, bubbleWidth, fontSize);
ctx.fillStyle = "black";
lines.forEach((text, i) => {
ctx.fillText(text, line.bbox.x0, line.bbox.y0 + (i * fontSize * 1.2));
});
*/
})
await worker.terminate();
// Convert the Canvas to image data
const imgAsDataURL = canvas.toDataURL('image/png');
if (typeof window !== "undefined") {
const foo = (window as any)
if (!foo.debugJujul) {
foo.debugJujul = []
}
foo.debugJujul.push({
lines
})
}
console.log("lines:", lines)
return imgAsDataURL;
} catch (err) {
console.error(err);
}
return "";
}
function wrapText(context: CanvasRenderingContext2D, text: string, x: number, y: number, maxWidth: number, lineHeight: number) {
const words = text.split(' ');
let line = '';
const lines = [];
for(let n = 0; n < words.length; n++) {
let testLine = line + words[n] + ' ';
let metrics = context.measureText(testLine);
let testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
lines.push(line);
line = words[n] + ' ';
}
else {
line = testLine;
}
}
lines.push(line);
return lines;
} |