Outputs

The API generates three different categories of output:

• Images are common resources and they are best used when you don’t need to scale them out of their original size.
• SVG is a vector image format and is best used when you need to scale it on different sizes.
• ASCII is a set of characters. You can use this code on specific devices (terminals) that don’t support images or vectors.

Not all the Output options support advanced Features such as Background color, or Logo image. We’ll back to this later.

Note: if you have a special Output requirements, please contact us for further information. We’ll be happy to help you to fulfill your needs.

Image Formats

The output option allow you to render the code into the most common image formats.
You’ll notice that the output field support polymorphism.
This allow us to expand our future output capabilities without disrupting the given schema.
For example in future we might introduce EPS (vector) output, nothing will change for you, just feel free to implement the new output media.

How great is that?

Only raster images (JPG, PNG, etc…) output support Backgorund feature.

• Background image
• Logo for Images (that’s different from Logo for SVG)

See the examples below on how to use it in your implementation. Complete schema is available on Schema specification page.
(i) Some sections outside the scope of this example have been omitted

Here let see a PNG image file. You can choose between wide range of raster image types, more here.

 {
   "output": {
     "image": {
       "imageType": "PNG",
       "darkColor": "000000FF",
       "lightColor": "FFFFFFFF",
       "unitsPerModule": 10,
       "drawQuietZone": true,
       "logo": {
         "sizePercent": 25,
         "backgroundColor": "FFFFFFFF",
         "borderWidth": 4,
         "ref": "myStoredLogo.png"
       },
       "backgroundImage": {
         "ref": "myStoredBackground.png"
       }
     }
   }
 }

Let’s go quickly through some of the most important fields in the JSON:

• imageType
• • You can choose among most common raster images: JPG, PNG, GIF (not animated), BMP, TGA, and maybe more in the future!
• darkColor and lightColor
• • Use the CSS standard hexadecimal color scheme, including transparency, this allow you some great effects if you use background image or just for a PNG image.
• unitsPerModule
• • How many units per each QR module. Easy way is more units bigger image.
• drawQuietZone
• • Draw a safe border around the actual QR code
• logo and background
• • Use a reference to a previously uploaded image via Storage image upload call. It’s necessary to have an uploaded image for Logo or Background to work. For Logo you can also specify the color behind the Logo itself, this allow you to have margin for some creativity!

SVG Format

The output option allow you to render the code into vector graphic image.
SVG Output support only the following feature.

• Logo for SVG

See the examples below on how to use it in your implementation. Complete schema is available on Schema specification page.
(i) Some sections outside the scope of this example have been omitted

{
  "output": {
    "svg": {
      "width": 200,
      "height": 200,      
      "darkColor": "000000FF",
      "lightColor": "FFFFFFFF",
      "drawQuietZone": true,
      "logo": {
        "imageType": "SVG",
        "sizePercent": 25,
        "backgroundColor": "FFFFFFFF",
        "borderWidth": 4,
        "embedded": true,
        "ref": "myStoredLogo.png"
      }
    }
  }
}

Let’s go quickly through some of the most important fields in the JSON:

• width and height
• • In this case you need to specify the actual size of the QR you want to create. However let’s recall that one of the biggest pro of vector images is that you can scale it without loss in quality.
• logo
• • Some interesting fields for the logo. We support both vector and raster image for the imageType. Remember that using a raster image will degrade in quality if you’ll scale the whole QR code.
• logo embedded
• • • SVG embed the logo image chosen

ASCII Format

The output option allow you to render the code into ASCII text.
ASCII Output does not support any colors nor any of the Features.

See the examples below on how to use it in your implementation. Complete schema is available on Schema specification page.
(i)Some sections outside the scope of this example have been omitted

{
  "output": {
    "ascii": {
      "unitsPerModule": 1,
      "drawQuietZone": true
    }
  }
}

ASCII Art is amazing! Such a retro feeling, plus you can use it everywhere, we mean everywhere… also on your Terminal or Commodore 64 perhaps.

Questions?
Don’t shy away from looking at our Documentation or more technical Schema

Ready for the next step? Let’s go!