bostrom / text-to-image

Converts text as a string to an image containing that text.
ISC License
110 stars 40 forks source link

Completely black output #283

Open silapoint opened 1 week ago

silapoint commented 1 week ago

Version of the library "text-to-image": "^7.0.1"

Describe the bug The image generation produces a blacked out image.

To Reproduce

import { generate } from 'text-to-image';
const dataUri = await generate('Lorem ipsum dolor sit amet');
console.log("dataUri", dataUri)

This outputs:

dataUri data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAAwCAYAAAA/1CyWAAAABmJLR0QA/wD/AP+gvaeTAAAAyUlEQVR4nO3VwQ3AIBDAsIP9d25nIB+EZE+QX9bMfAMAh/btAADeZCAAJAYCQGIgACQGAkBiIAAkBgJAYiAAJAYCQGIgACQGAkBiIAAkBgJAYiAAJAYCQGIgACQGAkBiIAAkBgJAYiAAJAYCQGIgACQGAkBiIAAkBgJAYiAAJAYCQGIgACQGAkBiIAAkBgJAYiAAJAYCQGIgACQGAkBiIAAkBgJAYiAAJAYCQGIgACQGAkBiIAAkBgJAYiAAJAYCQGIgACQGAkDyA4ngAV9T575tAAAAAElFTkSuQmCC

Expected behavior It should produce an image with the text Lorem ipsum dolor sit amet written over a white background.

Additional context This was reproduced for other texts as well as .then() and sync calls.

Thanks for your work on this library!

bostrom commented 5 days ago

Without any other settings, that string should produce the following URI:

data:image/png;base64,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

Which is around 4200 characters long. Fork the examples sandbox and try it yourself.

Your URI is only 390 characters. Can you produce a codesandbox that exhibits the behavior you describe?