QuickChart provides an API that lets you overlay one image on top of another, creating a watermark or logo on top of an original image.
The API is flexible and allows you to customize the size, position, opacity, and margin of the watermark.
The watermark API endpoint is available at
https://quickchart.io/watermark. It works by taking URLs for two images. There are a number of optional parameters that you can use to customize the images are overlayed.
Here’s a simple example that uses
https://quickchart.io/watermark ?mainImageUrl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2F6%2F6e%2FGolde33443.jpg &markImageUrl=https%3A%2F%2F1000logos.net%2Fwp-content%2Fuploads%2F2016%2F10%2FBatman-logo.png &markRatio=0.25
The above URL instructs the API to overlay
markImageUrl on top of
markRatio ensures that the logo/watermark is resized to fit nicely in the image (taking up 25% of the width).
If you put the URL in an image tag, you’ll see the following:
|mainImageUrl||URL of original image. Required|
|markImageUrl||URL of image to overlay atop main image. Required|
|opacity||Alpha of mark. 0.0-1.0||1.0|
|imageWidth||Width of final image, in pixels||Original image width|
|imageHeight||Height of final image, in pixels||Original image height|
|markWidth||Width of mark, in pixels||Original mark width|
|markHeight||Height of mark, in pixels||Original mark height|
|markRatio||Resize the mark to be some ratio of the original image. 0.0-1.0|
|position||Preset positions. One of:
|positionX||X position of mark, in pixels|
|positionY||Y position of mark, in pixels|
|margin||Margin in pixels around the mark when it is auto-positioned.
|5% of original image width|
Let’s take the above image and do some common customizations.
First, let’s suppose move the logo to the bottom left by adding
&position=bottomLeft to the URL:
Let’s turn it into a watermark by fading the logo, setting
opacity=0.2. And make it larger by setting
Watermarking a chart
The URLs can also be used with the chart API in order to put a logo on a chart. The chart API allows you to create charts by constructing a URL. Take a simple chart image:
Construct a watermark API request that contains the chart image URL and the logo image URL (make sure you URL-encode both URLs):
https://quickchart.io/watermark ?mainImageUrl=<QuickChart Chart Image URL> &markImageUrl=<Logo Image URL> &markRatio=0.5 &position=center
This produces a composite image:
This API makes it easy to superimpose an image atop another in order to add a logo to an image or create a watermark. It works with any images and offers flexible options to customize your mark’s appearance and position.
Stuck? Have questions? Feature request? Please reach out!