В этом документе описывается, почему и как запрашивать изображение с помощью HTTP POST.
Обзор
Если вы запрашиваете изображение в коде или вам нужен URL-адрес длиннее 2 КБ символов, вам нужно будет отправить запрос изображения с помощью HTTP POST. Сервер инфографики поддерживает запросы HTTP POST длиной до 16 КБ.
Вот пример самого простого типа POST-запроса: использование элемента <form> :
Это изображение на самом деле является страницей, размещенной в <iframe> . Вот код формы:
<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>
Ответ на действительный запрос POST представляет собой изображение PNG, такое же, как и ответ на запрос GET.
Совет. Некоторые браузеры кэшируют запросы к определенному URL-адресу, поэтому, даже если вы измените параметры POST, браузер фактически не будет запрашивать сервер изображений. Это может вызвать проблему при попытке перезагрузить изображение, которое часто меняется (что может быть проблемой во время тестирования). Чтобы обойти это, добавьте ?chid= value в конце URL-адреса POST, где value изменяется при каждом запросе: сервер изображений проигнорирует этот параметр, и браузер повторно отправит запрос, а не просто перезагрузит кешированную версию.
Существует несколько способов использования POST, и все они требуют дополнительного кодирования либо в коде страницы, либо на сервере, на котором размещена страница. Чтобы использовать POST, вы обычно создаете отдельную страницу для каждого изображения и встраиваете или ссылаетесь на эти страницы на своей главной странице, используя теги <iframe> или <img> , как показано ниже.
Вот примеры использования POST как с JavaScript, так и с PHP.
Использование JavaScript для POST-запроса
Самый простой способ выполнить POST-запрос JavaScript — создать страницу, на которой размещена форма с данными изображения в элементах <input> , и отправить запрос страницы в обработчик onLoad() , и страница будет заменена изображением. PNG. Страница, на которой размещено это изображение, должна включать эту страницу с помощью <iframe> . Вот код страницы изображения:
Примечание . Пример ниже включает параметр chid , для которого задано изменяющееся значение в URL-адресе. Это приводит к обновлению браузера по причине, описанной в совете выше. Если ваше изображение не меняется часто, вам не нужно добавлять этот параметр.
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> Если вы используете элемент <form> , вам не нужно URL-кодировать ваши строки.
Затем это изображение можно загрузить на другую страницу с помощью <iframe> на главной странице, например:
другая_страница.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
Использование PHP для POST-запроса
Большинство серверных языков поддерживают явные запросы POST. Вот пример создания POST-запроса с использованием PHP. В этом примере демонстрируется страница, которая генерирует QR-код со 150 случайными значениями. Чтобы использовать это самостоятельно, вы должны настроить массив $qrcode , включив в него свои собственные значения.
Примечание . Пример ниже включает параметр chid , для которого задано изменяющееся значение в URL-адресе. Это приводит к обновлению браузера по причине, описанной в совете выше. Если ваше изображение не меняется часто, вам не нужно добавлять этот параметр.
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));
?> Встроить это изображение проще, чем в примере с JavaScript, потому что вы можете просто указать на свою страницу POST с помощью <img> , как показано здесь:
другая_страница.html
<img width='300' height='300' src='imageserver-image.php'>