terence410 / ultimate-text-to-image Goto Github PK

View Code? Open in Web Editor NEW

31.0 31.0 6.0 28.5 MB

License: MIT License

JavaScript 0.38% TypeScript 99.62%

ultimate-text-to-image's People

Contributors

Stargazers

Watchers

Forkers

jessety ipol2n hiddentao albakov yassine-cc matzrm

ultimate-text-to-image's Issues

Easter egg Putin H**** works incorrect

Problem is thet every word ПУТ* , not just ПУТИН is replaced wth ХУЙЛО

Путь к успеху = Хуйлоь к успеху (way to success => huyloy to succes)

Also i would like to turn off feature, as it's not allways appropriate

Is there any way to change background color opacity?

I'm assuming I can hook into Canvas to make the background color more transparent?

backgroundColor: 'rgba(0, 0, 200, 0.5)',

Sets the color to green but still with full opacity.

Thanks!

Eye emoji not appearing

I am trying to show this emoji 👁 as an image using this package but it's not working.

Instead it's showing its unicode number.

React component and browser usage broken

In browser we don't have fs, so it doesn't work

error await is only valid in async functions and the top level bodies of modules in example

hello, i am learning javascript and need to know how to apply async await promise in that code of adding images

i am trying to put text to an image using 2 texts and then upload to imgur

Lines continue after text is wrapped

I am trying to create a square with text inside vertically and horizontally aligned. For some reason the lines continue after the letters are ending:

The code is:

let dataUri = new UltimateTextToImage("Testing if this is good already, I guess not...", {
        fontFamily: "Almoni ML v5 AAA, Noto Emoji, Arial, MS UI Gothic",
        fontColor: "#00FF00",
        width: 400,
        height: 400,
        underlineColor: "#00FFFF33",
        underlineSize: 2,
        maxHeight: 1000,
        valign: "middle",
        align: "center",
        margin: 20,
    }).render().toFile(path.join(__dirname, "test2.jpg"))

Package breaks / doesnt install on Apple Silicon

Hi,
I've added this package as a dependency in one of our utility packages but it causes the installation to break on Apple Silicon M2 with the following error

js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /Users/path/to/project/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/path/to/project/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/path/to/project/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | arm64
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v108 ABI, unknown) (falling back to source compile with node-gyp) 
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.10.11 found at "/Library/Frameworks/Python.framework/Versions/3.10/bin/python3"
npm ERR! gyp info spawn /Library/Frameworks/Python.framework/Versions/3.10/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/path/to/project/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/path/to/project/node-gyp/18.16.1/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/path/to/project/node-gyp/18.16.1',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/path/to/project/node-gyp/18.16.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/path/to/project/node_modules/canvas',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! /bin/sh: pkg-config: command not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:325:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 22.6.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/path/to/project/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/path/to/project/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
npm ERR! gyp ERR! cwd /Users/path/to/project/node_modules/canvas
npm ERR! gyp ERR! node -v v18.16.1
npm ERR! gyp ERR! node-gyp -v v9.3.1
npm ERR! gyp ERR! not ok 
npm ERR! node-pre-gyp ERR! build error 
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/path/to/project/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/path/to/project/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/path/to/project/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 22.6.0
npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/path/to/project/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/path/to/project/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.16.1
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myUserName/.npm/_logs/2023-07-31T17_57_20_457Z-debug-0.log

Pango-WARNING **: 17:39:22.166: couldn't load font "Noto Sans TC 50px", falling back to "Sans 50px", expect ugly output.

I'm having this problem when starting the project. regardless of the font size, this error ends up occurring

(process:13784): Pango-WARNING **: 17:39:22.166: couldn't load font "Noto Sans TC 50px", falling back to "Sans 50px", expect ugly output.

(process:13784): Pango-WARNING **: 17:39:22.170: couldn't load font "Noto Sans TC Not-Rotated 50px", falling back to "Sans Not-Rotated 50px", expect ugly output.

Issue regarding transparent background and how to get image uri

Hey we were using package and it is working great we ran into two problems

We are not able to create an image with transparent background even after passing transparent value.
Not able to get image uri.

Is possible to create personalized images on the fly?

It would be possible with this library to create personalized images on the fly, passing the text via URL parameters?

For example: myimage.jgp?name=peter&company=abc
Would create 2 text overlays on top of myimage.jpg

Emoji not Colored using Segoe UI Emoji & Noto Color Emoji Font

testing emoji with font Segoe UI Emoji and Noto Color Emoji, but the emoji still no color.

i try with registerFont thoo and install manualy on windows, still same.

I'm looking to rotate the text in the image and I'm running into problems. The only way I see to do it is in preRender, but when I do the text seems to get cropped off. I know this seems like something with canvas, but maybe this library could provide a rotate param in IImage or something that will rotate an image when it's placed on another one.

Code (I have more steps applying the background and "test" text, but this is the applicable code)

const textImage = await getCanvasImage({
        buffer: new UltimateTextToImage(
            interaction.user.username,
            {
                width: 130,
                height: 50,
                alignToCenterIfHeightLE: 1,
                fontSize: 72,
                minFontSize: 8,
                align: "center",
                valign: "middle",
                fontColor: "#c96b8e",
                fontFamily: "Mario64",
            },
            {
                preRender: (canvas) => {
                    const canvasContext = canvas.getContext("2d");

                    canvasContext.rotate(-0.523599);
                },
            }
        )
            .render()
            .toBuffer(),
    });

    const textToImage = new UltimateTextToImage("", {
        width: backgroundImage.width,
        height: backgroundImage.height,
        images: [
            {
                canvasImage: textImage,
                x: 215,
                y: 365,
            },
        ],
    });

Result (the pink text in the bottom right-hand corner of the letter)

Browser error, referencer erroe process is not defined browser

referencer erroe process is not defined browser

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.