[Code-Snippet]: Stream custom transparent textures without background

FiveM Releases
, , , ,
1

Hey, a few people from the forum have asked me if I can share the api to stream transparent images as markers, without white background. So here is the code (and an example of lua):
(node js | Iā€™m actually wayy too lazy rn to create a repo :relieved:),

import express from 'express';
import url from 'url';
import querystring from 'querystring';

const app = express();
let port = 1337

// get image without white background //
app.get('/getImg', (req, res) => {
    const headers = req.headers;
    let fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
    let QueryParams = querystring.parse(url.parse(fullUrl).query);

    let link = null;
    if (headers.link) {
        link = headers.link;
    } else if (QueryParams.link) {
        link = QueryParams.link;
    }

    if (link != null) {
        res.send(`'<style>body { overflow: hidden; }</style> <img src = ${link} style="width: auto; height: 512px; overflow-x: hidden; overflow-y: hidden; text-align: center; position: absolute; inset: 0; margin: auto; display: block; image-orientation: from-image;"></img>'`)
    }
});

app.listen(port, () => {
    console.log(`Started listen on port ${port}`)
});

Format for the CreateDuiUrl:

-- format the url --
local full_endpoint = GetCurrentServerEndpoint() -- or the ip of the server you host the api --
local endpoint = full_endpoint:gsub(':.-$', '')
local imgLink = "https://cdn.discordapp.com/attachments/919964850657050676/1099316074727620680/image.png"
local url = ("http://%s:1337/getImg?link=%s"):format(endpoint, imgLink)

-- create dui from url and create runtime texture --
local dobj = CreateDui(url, 256, 256) -- !! Change the format to the right size !! --
local duiHandle = GetDuiHandle(dobj)
local dict = CreateRuntimeTxd('marker') -- dictionary name
local txd = CreateRuntimeTextureFromDuiHandle(dict, 'marker', duiHandle) -- texture name
10 Likes