現在、html2canvas を使用して div を画像として取得しています。
html2canvas([document.getElementById("board")],{
onrendered: function( canvas ) {
var img = canvas.toDataURL();
var request = $.ajax({
type:"POST",
url:"downloadPic.php",
data:{downloadPic : img}
});
次に、その画像をダウンロードしたい(ブラウザのデフォルトのダウンロードディレクトリに)
if(isset($_POST['downloadPic'])){
$pic = $_POST['downloadPic'];
$filteredData=substr($pic, strpos($pic, ",")+1); //html2canvas adds this
$unencodeData=base64_decode($filteredData);
$filename = "downloadedPic";
header('Content-Description: File Transfer');
header('Content-Type: image/png');
header('Content-Disposition: attachment; filename="'.basename($filename).'"');
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . filesize($unencodeData));
ob_clean();
flush();
readfile($unencodeData);
}
しかし、これはうまくいかないようです。file_put_contents("downloadedPic", $unencodedData) を実行すると、画像はサーバーに正常に保存されます。
ヘッダーの構成が異なる必要がありますか?