# Custom Image

{% hint style="info" %}
It's recommended to use a desktop http client to test out image gen features such as Insomnia Client.\
<https://insomnia.rest/products/insomnia>
{% endhint %}

<figure><img src="https://3672136931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW0dwcUm6OW6GS8mkEbZT%2Fuploads%2F1fkvXLsyFl4ORZ9uoT6H%2Fimage.png?alt=media&#x26;token=fab1ad9a-3c32-4bf8-9ccc-9b2d4fed3bed" alt=""><figcaption><p>Insomnia Http Client</p></figcaption></figure>

## Custom Image Generation

<mark style="color:green;">`POST`</mark> `https://api.fluxpoint.dev/gen/custom`

Generate a custom image with json body format.

#### Headers

| Name                                            | Type | Description                                           |
| ----------------------------------------------- | ---- | ----------------------------------------------------- |
| Authorization<mark style="color:red;">\*</mark> |      | Your API token here <https://fluxpoint.dev/api/token> |

{% tabs %}
{% tab title="200: OK " %}
This will send you raw image data (bytes)
{% endtab %}

{% tab title="400: Bad Request " %}

```json
{
    "success": false,
    "code": 400,
    "message": "Failed to parse request json. ( IG-7 )"
}
```

{% endtab %}
{% endtabs %}

Request json body

```json
{
    "Base": {
        "type": "bitmap",
	"width": 2000,
	"height": 2000,
	"color": "#7289da"
    },
    "Images": [
	{
	    "type": "url",
	    "url": "https://img.fluxpoint.dev/thm/1422436083957760.jpg",
	    "width": 1000,
	    "height": 1000
	},
	{
	    "type": "bitmap",
	    "round": 160,
	    "x": 20,
	    "y": 240,
	    "width": 1220,
	    "height": 360,
	    "color": "0,0,0,80"
	}
    ],
    "Texts": [
        {
            "text": "Hello",
	    "size": 120,
	    "x": 600,
	    "y": 1060
        }
    ]
}
```

<details>

<summary>BotGhost Support</summary>

If you are using botghost with this API then you can use the tips below to help.

Create a body key named `canvas` then enter the json format above as the value.

<img src="https://3672136931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW0dwcUm6OW6GS8mkEbZT%2Fuploads%2FVk1a4KSk1TotOENf8eyH%2Fimage.png?alt=media&#x26;token=ad0bc8f8-f7ea-4ec4-91da-f196c48b588b" alt="" data-size="original">

</details>

<details>

<summary>API Limits</summary>

These are set in place to prevent potential abuse and resource usage.

Max json body size is 10mb\
Max images is 50 (Max 10 url types)\
Max texts is 50

</details>

#### Base

The base can be either a Square (bitmap) or Image url.

#### Elements (Images)

```json
"Images": [
    {
        "url": "https://img.fluxpoint.dev/thm/1422436083957760.jpg",
        "width": 540,
        "height": 540,
        "cache": true
    }
]
```

<details>

<summary>Square (Bitmap)</summary>

<mark style="color:orange;">Required</mark>\
`type: bitmap`\
\
Use either Width & Height or Size to set both.\
`width: 0`\
`height: 0`\
`size: 0`\
\
\ <mark style="color:blue;">Optional</mark>\
`color: white` - Set the shape color using name, hex, rgb or rgba for transparency.\
`round: 0` - \
`x: 0` - Position of the element on the X axis horizontally.\
`y: 0` - Position of the element on the Y axis vertically.\
`skip: false` - Skip parsing this element to dynamically hide it.

</details>

{% hint style="warning" %}
Starting 2024 do not use Discord attachments as permanent image urls due to restrictions.\
You will need to store images on your own server or via another service like Imgur.
{% endhint %}

<details>

<summary>Image Url</summary>

<mark style="color:orange;">Required</mark>\
`url: https://website.com/image.png` - \
\
\ <mark style="color:blue;">Optional</mark>\
`cache: false` - Cache the image server-side so it can be easily loaded again such as background images. (Not Recommended for Avatars or dynamic images)\
`round: 0` - \
`x: 0` - Position of the element on the X axis horizontally.\
`y: 0` - Position of the element on the Y axis vertically.\
`skip: false` - Skip parsing this element to dynamically hide it.\
`color: white` - Set the background color using name, hex, rgb or rgba for transparency.\
^ You can also set this to auto and it will use the primary color of the image for transparent images like avatars.\
\
Use either Width & Height or Size to set both.\
`width: 0`\
`height: 0`\
`size: 0`\
\
`maxWidth: 0` - Set the max width the image can scale to if large.\
`maxHeight: 0` - Set the max height the image can scale to if large.

</details>

<details>

<summary>Svg</summary>

<mark style="color:orange;">Required</mark>\
`type: svg`\
`path: M338.752` - The svg path to use to define the shape.\
\
Use either Width & Height or Size to set both.\
`width: 0`\
`height: 0`\
`size: 0`\
\
\ <mark style="color:blue;">Optional</mark>\
`color: white` - Set the svg color using name, hex, rgb or rgba for transparency.\
`x: 0` - Position of the element on the X axis horizontally.\
`y: 0` - Position of the element on the Y axis vertically.\
`rotate: 0` - Rotation of the icon in degrees.\
`skip: false` - Skip parsing this element to dynamically hide it.

</details>

<details>

<summary>Icon</summary>

<mark style="color:orange;">Required</mark>\
`type: icon`\
`icon: mdi:account` - Type of icon to use from <https://icon-sets.iconify.design/>\
`size: 128` - Size of the icon both width and height.\
\
\ <mark style="color:blue;">Optional</mark>\
`color: white` - Set the icon color using name, hex, rgb or rgba for transparency.\
`x: 0` - Position of the element on the X axis horizontally.\
`y: 0` - Position of the element on the Y axis vertically.\
`rotate: 0` - Rotation of the icon in degrees.\
`skip: false` - Skip parsing this element to dynamically hide it.

</details>

<details>

<summary>Circle</summary>

<mark style="color:orange;">Required</mark>\
`type: circle`\
`radius: 20` - Size of the circle from the centre point.\
\
\ <mark style="color:blue;">Optional</mark>\
`color: white` - Set the shape color using name, hex, rgb or rgba for transparency.\
`x: 0` - Position of the element on the X axis horizontally.\
`y: 0` - Position of the element on the Y axis vertically.\
`skip: false` - Skip parsing this element to dynamically hide it.

</details>

<details>

<summary>Triangle</summary>

<mark style="color:orange;">Required</mark>\
type: triangle\
`cut: topleft/topright/bottomleft/bottomright` - Set the cut corner of the triangle.\
\
Use either Width & Height or Size to set both.\
`width: 128`\
`height: 128`\
`size: 128`\
\
\ <mark style="color:blue;">Optional</mark>\
`color: white` - Set the shape color using name, hex, rgb or rgba for transparency.\
`x: 0` - Position of the element on the X axis horizontally.\
`y: 0` - Position of the element on the Y axis vertically.\
`skip: false` - Skip parsing this element to dynamically hide it.

</details>

#### Global Options

Set default options for the image gen.

```json
{
   "global": {
      "textSize": 16 
   }
}
```

<details>

<summary>Global</summary>

<mark style="color:blue;">Optional</mark>\
`textSize: 16` - Default text size for all texts.\
`textColor: white` - Default text color for all texts.\
`textFont: Sans Serif` - Default text font for all texts.\
`textOutlineWidth: 0` - Default text outline width.\
`textOutlineColor: black` - Default text outline color.\
`textAlign: l/m/r` - Default text alignment.\
`textX: 0` - Default position on the X axis vertially.

</details>

#### Text

Add these into the Texts list to generate them.\
`text: "Hello"` or `texts: [ "Hello", "User" ]` - Set the text (Required)

```json
"Texts": [
    {
        "text": "No api?",
        "size": 45,
        "x": 40,
        "y": 20,
        "width": 460,
	"bold": true,
	"align": "m",
	"outlinecolor": "black",
	"outlinewidth": 8,
	"line": 1,
	"weight": 500
    }
]
```

<details>

<summary>Main Options</summary>

<mark style="color:blue;">Optional</mark>\
`size: 16` - Set the font size of the text.\
`font: Sans Serif` - Set the font to use for the text.\
`color: white` - Set the text color from name/hex/rgb/rgba use rgba for transparency. \
`back: transparent` - Set the background color for the text box from name/hex/rgb/rgba use rgba for transparency. \
`skip: false` - Skip parsing this element to dynamically hide it.

</details>

<details>

<summary>Position Options</summary>

<mark style="color:blue;">Optional</mark>\
`x: 0` - Position the text 20 pixels from the left.\
`x: 0` - Position the text 20 pixels from the top.\
`align: l/m/r` - Align the text from left/center/right \
\
`width: 0` - Set the max width of the text box before it wraps to a newline.\
`height: 0` - Set the max height of the text box to clip extra text.

</details>

<details>

<summary>Style Options</summary>

<mark style="color:blue;">Optional</mark>\
`bold: false` - Set the text to bold style. (Default false)\
`italics: false` - Set the text to italics style. (Default false)\
`underline: false` - Set the text to underline style. (Default false)\
`line: 1` - Set the line spacing for multiline text, used with a decimal point like 1.2 \
`weight: 500` - Increase the boldness of the text.&#x20;

</details>

<details>

<summary>Outline</summary>

Optional\
`outlinewidth: 0` - Set the outline size from the text.\
`outlinecolor: black` - Set the outline color from name/hex/rgb/rgba use rgba for transparency.\
`outlineblur: 1` - Make the outline transparency less visible for a cool effect.

</details>

<details>

<summary>Date/Time Format</summary>

<mark style="color:blue;">Optional</mark>\
`unix: 0` - Set the unix timestamp to show as date/time.\
`snowflake: 0` - Set the Discord id to show as date/time.\
`format: dd/MM/yyyy` - Set the date/time format to show as text.\
<https://www.c-sharpcorner.com/blogs/date-and-time-format-in-c-sharp-programming1>

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fluxpoint.dev/api/endpoints/image-gen/custom-image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.