This document describes why and how to request an image using HTTP POST.
Overview
If you are requesting an image in code, or if you need a URL longer than 2K characters, you will need to send your image request using HTTP POST. The infographics server supports HTTP POST requests up to 16K long.
Here's an example of the most basic kind of POST request: using a <form> element:
This image is actually a page hosted in an <iframe>. Here is
the form code:
<form action='https://chart.googleapis.com/chart' method='POST'> <input type='hidden' name='cht' value='qr' /> <input type='hidden' name='chs' value='300x300' /> <input type='hidden' name='chl' value='This is my QR code'/> <input type='submit' /> </form>
The response to a valid POST request is a PNG image, the same as a GET request response.
Tip: Some browsers cache requests to a specific
URL, so even if you change the POST parameters, the browser won't actually requery
the image server. This can cause a problem when trying to reload an image that
changes often (which can be a problem during testing). To work around this, add ?chid=value at
the end of the POST URL, where value changes
with every request: the image server will ignore this
parameter, and the browser will resend the query, and not simply reload the cached
version.
There are a number of ways to use POST, and all of them require additional
coding either in the page code or on the server
hosting the page. To use POST, you will typically create a separate page for
each image, and embed or link to these pages in your
main page using <iframe> or as an <img> tags
as shown below.
Here are examples of using POST with both JavaScript and PHP.
Using JavaScript for a POST Request
The easiest way to make a JavaScript POST request is to create a page that hosts
a form with image data in <input> elements, and have the page
POST the request in its onLoad() handler, and the page will be replaced by the image
PNG. The page that hosts this image should include this page using an <iframe>.
Here's the code for the image page:
Note: The sample below includes a chid parameter
set to a changing value in the URL. This causes the browser to refresh for the
reason described in the tip above. If your image doesn't change often, you don't
need to add that parameter.
post_infographic.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
// Send the POST when the page is loaded,
// which will replace this whole page with the retrieved image.
function loadGraph() {
var frm = document.getElementById('post_form');
if (frm) {
frm.submit();
}
}
</script>
</head>
<body onload="loadGraph()">
<form action='https://chart.googleapis.com/chart' method='POST' id='post_form'
onsubmit="this.action = 'https://chart.googleapis.com/chart?chid=' + (new Date()).getMilliseconds(); return true;"> <input type='hidden' name='cht' value='qr' />
<input type='hidden' name='cht' value='qr' />
<input type='hidden' name='chs' value='300x300' />
<input type='hidden' name='chl' value='This is my QR code' />
<input type='submit' />
</form>
</body>
</html>
If you use a <form> element, you do not need to URL-encode
your strings.
This image can then be loaded into another page by using an <iframe> in
your host page, such as this:
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Using PHP for a POST Request
Most server-side languages support explicit POST requests. Here's an example of
making a POST request using PHP. This example demonstrates a page that generates
a QR code with 150 random values. To use this yourself, you would customize
the $qrcode array
to include your own values.
Note:The sample below includes a chid parameter
set to a changing value in the URL. This causes the browser to refresh for the
reason described in the tip above. If your image doesn't change often, you don't
need to add that parameter.
imageserver-image.php
<?php
// Create some random text-encoded data for a QR code.
header('content-type: image/png');
$url = 'https://chart.googleapis.com/chart?chid=' . md5(uniqid(rand(), true));
$chd = 't:';
for ($i = 0; $i < 150; ++$i) {
$data = rand(0, 100000);
$chd .= $data . ',';
}
$chd = substr($chd, 0, -1);
// Add image type, image size, and data to params.
$qrcode = array(
'cht' => 'qr',
'chs' => '300x300',
'chl' => $chd);
// Send the request, and print out the returned bytes.
$context = stream_context_create(
array('http' => array(
'method' => 'POST',
'content' => http_build_query($qrcode))));
fpassthru(fopen($url, 'r', false, $context));
?>
Embedding this image is easier than the JavaScript example, because you can simply
point to your POST page with an <img> tag, as shown here:
another_page.html
<img width='300' height='300' src='imageserver-image.php'>