# 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>