logo
TAG digital studios
Software NOT made in Silicon Valley

Dynamic Images

Dynamic images takes an existing image (usually by an existing public image URL, database or CDN) and modifies the image dynamically. The resulting image is never stored (though it could be cached) and simply returned modified, while the original is never altered.

This is most often seen as watermarking photos, applying borders on all images, cropping all images the same, or on meme makers.

Use Case

If you have a large number of images being loaded into some source (we can help you build that as well) there is often a need to alter all the images like a Photoshop Action. For example, center crop square all the images, apply a gray 25 pixel border, watermark them with a copyright, and overlay the title of the photo onto the image. Medical images with existing PII embedded in the images could all be cropped to remove identifying information, image metadata scrubbed, and returned with a completely new random file name to make them HIPAA compliant.

Formatting

https://rayrpg.com/api/v1.0/EnhanceImage?src=<Full_URL_to_Image>&<Option_1_Key>=<Option_1_Value>&...

Deployment

This example is setup as a hosted serverless function (API) that simply reads the below parameters from the URL Request (POST also works). This makes it extremely easy to integration into your entire app envirnment regardless of what stacks are being used in other apps. The request is simply HTTP with a binary reponse (though the reponse can also be wrapped in JSON with encoded image data). The funtion could be hosted in your own Azure environment (we can also easily setup one for you that you own), or used from our hosted environment, or the code library added to an existing app (this is not the best choice).

Examples

This butterfly example is rewritten from this original image and not stored anywhere.

The API Specification

The API is currently configured to work via GET or JSON POST. The only required input parameter is src.

OPTION KEY TYPE DESCRIPTION DEFAULT
source src URL | string | Color Name This is the only required value and usually a web URL to an image, though it could be a database ID or file name in a CDN or blob storage. The web color names will also work and simply make a solid square background of 1000 pixels for now. *
border color bc color | RGBA String The border color #FFF
border size bw int The thickness of the border. The border expands the size of the final image (outset) and does not cover the existing image. 0
padding p int Padding thickness inside the border before any text 25
cropping crop Original | CenterSquare | TopLeftSquare | BottomRightSquare Cropping to apply (see below) Original
filter f Identity | BW | Pastel | Sepia Image filter to apply if any (see below) Identity
image format format RawPNG | RawJPEG Both PNG and JPEG are supported. Raw indicates JUST the plain byte response. Later Wrapped will be used to indicare return the image wrapped in JSON and encoded as BASE64. RawPNG
quality q int [1,100] Image quality only applies to JPEG 75
title title string Title text
title text color ttc color | RGBA String Color of the title text #FFF
max title font size mtfs float The title font size is automatically calculated to be the largest that will fit the width of the image. However setting this value will limit the maximum font size to use for the title text.
title text stroke tts int [0,100] The thickness of the title text outline where 0 is none and 100 is 10% of the font size. 0
title text stroke color ttsc color | RGBA String Color of the title text stroke #FFF
font family ff string [FamilyName] The font family name that will be applied to to all text Arial
body msg string The body message text. Use the pipe | character to indicate a line break.
body text color btc color | RGBA String The body text color #FFF
body font size bfs float The body font size 24
body vertical alignment bva Center | Top | Bottom The body vertical alignment Center
body text stroke bts int [0,100] The thickness of the body text outline where 0 is none and 100 is 10% of the font size. 0
body text stroke color btsc color | RGBA String Color of the body text stroke #FFF
icon icon enum A stamp to overlay on the image anywhere None
icon size is int The radius of circile in which the icon is inscribed in 50
icon color ic color | RGBA String The color of the icon #FFF
icon X center ix int X pixel center of the icon where -1 is the cetner. X Center
icon Y center iy int Y pixel center of the icon where -1 is the center. Y Center
icon angle ix [-360,360] int Angle to rotate the incon in degrees 0
format format RawPNG | RawJPEG | WrappedPNG | WrappedJPEG Response format where Raw is the actual binary image and wrapped will return a JSON object where the image data bytes are encoded to BASE64. RawPNG
footer string The footer is also customizable but for the purpose of this demo is locked to prevent abuse of the demo
Cropping

For now we define three ways to crop and all result in a perfectly square image. You can crop perfectly centered on the image, from the top or left depending on the orientation of the source image, or from the bottom or right again depending on the source. We are always adding more crop standards and fully customizable cropping to any clients.

Fonts

Font family names are specified by the installed system fonts or custom fonts with the complete list here for this example. More fonts can be added.

Icons

Icons are SVG definition paths embedded in the code. More are always being added but the current list is here. Check out the random board renderer to see some of the icons.

Specifying Color

You can specify color for any color parameter using an RGBA color string which accepts a standard web color name or an RGB Hex color string. However, these strings can include an 4th optional opacity value as the 7th and 8th characters such as #RRGGBBAA (e.g. #56783ADC). The leading hash/pound character is optional.

Sample Images

While any public URL should work (we've set a size limit on the demo, but it's pretty high), we have a few images you can use stored in Azure Blobs you can specify by name in the src param as well. This could easily work as well using the eTag, or some other ID.

Wrapped Response

While the default is the modified image, specifying a wrapped response format will return the actual image BASE64 encoded and wrapped in JSON with a few other properties:

    
{
    "filename": <string>, // the original filename
    "contentType": <string>, // the return MIME type
    "data": <string>, // the actual image bytes BASE64 encoded
    "length": <int>, // the size of the image in bytes
    "isValid": <bool> // valid results
}
    

This is useful for binding the results directly to an image element in HTML without additional conversion.

Coming Soon

We are always adding more paramters to Dynamic Images. Some coming soon include:

Contact us with any custom requests.