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.
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.
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).
This butterfly example is rewritten from this original image and not stored anywhere.
The API is currently configured to work via GET or JSON POST. The only required input parameter is src.
|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 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.|
|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|
|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|
|footer||string||The footer is also customizable but for the purpose of this demo is locked to prevent abuse of the demo|
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.
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.
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.
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.
We are always adding more paramters to Dynamic Images. Some coming soon include:
Contact us with any custom requests.