이 문서에서는 HTTP POST를 사용하여 이미지를 요청하는 이유와 방법을 설명합니다.
개요
코드로 이미지를 요청하거나 2,000자(영문 기준)보다 긴 URL이 필요한 경우 HTTP POST를 사용하여 이미지 요청을 보내야 합니다. 인포그래픽 서버는 최대 16K 길이의 HTTP POST 요청을 지원합니다.
다음은 가장 기본적인 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 요청에 대한 응답은 GET 요청 응답과 동일한 PNG 이미지입니다.
팁: 일부 브라우저는 특정 URL에 대한 요청을 캐시하므로 POST 매개변수를 변경하더라도 브라우저가 실제로 이미지 서버를 다시 쿼리하지 않습니다. 이로 인해 자주 변경되는 이미지를 새로고침하려고 할 때 문제가 발생할 수 있습니다. 이는 테스트 중에 문제가 될 수 있습니다. 이 문제를 해결하려면 POST URL 끝에 ?chid=value를 추가합니다. 여기서 value는 요청할 때마다 변경됩니다. 이미지 서버는 이 매개변수를 무시하며 브라우저가 쿼리를 다시 전송하며 단순히 캐시된 버전을 다시 로드하는 것이 아닙니다.
POST를 사용하는 방법에는 여러 가지가 있으며 모두 페이지 코드 또는 페이지를 호스팅하는 서버에서 추가 코딩이 필요합니다. POST를 사용하려면 일반적으로 이미지마다 별도의 페이지를 만들고 아래와 같이 <iframe> 또는 <img> 태그로 기본 페이지에 이러한 페이지를 삽입하거나 연결합니다.
다음은 자바스크립트와 PHP로 POST를 사용하는 예입니다.
POST 요청에 JavaScript 사용
JavaScript POST 요청을 하는 가장 쉬운 방법은 <input> 요소에 이미지 데이터가 있는 양식을 호스팅하는 페이지를 만들고 페이지가 onLoad() 핸들러에서 요청을 POST하도록 하는 것입니다. 그러면 페이지가 이미지 PNG로 대체됩니다. 이 이미지를 호스팅하는 페이지는 <iframe>를 사용하여 이 페이지를 포함해야 합니다.
다음은 이미지 페이지의 코드입니다.
참고: 아래 샘플에는 URL에서 변경되는 값으로 설정된 chid 매개변수가 포함되어 있습니다. 이렇게 하면 위의 팁에 설명된 이유로 브라우저가 새로고침됩니다. 이미지가 자주 변경되지 않는 경우에는 이 매개변수를 추가할 필요가 없습니다.
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>를 사용하여 다른 페이지에 로드될 수 있습니다.
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
POST 요청에 PHP 사용
대부분의 서버측 언어는 명시적인 POST 요청을 지원합니다. 다음은 PHP를 사용하여 POST 요청을 작성하는 예입니다. 이 예는 임의의 값 150개가 포함된 QR 코드를 생성하는 페이지를 보여줍니다. 이를 직접 사용하려면 고유한 값을 포함하도록 $qrcode 배열을 맞춤설정하면 됩니다.
참고: 아래 샘플에는 URL에서 변경되는 값으로 설정된 chid 매개변수가 포함되어 있습니다. 이렇게 하면 위의 팁에 설명된 이유로 브라우저가 새로고침됩니다. 이미지가 자주 변경되지 않으면 이 매개변수를 추가할 필요가 없습니다.
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));
?>
아래와 같이 <img> 태그로 POST 페이지를 가리킬 수 있으므로 이 이미지를 삽입하는 것이 자바스크립트 예시보다 쉽습니다.
another_page.html
<img width='300' height='300' src='imageserver-image.php'>