formから投稿された画像がうまく表示されない

フォームから投稿された画像を画面に出力するための勉強をしているところです。
実際に書いたコードが下記です。フォームから投稿された画像を「test.png」という名前にして、あらかじめ作っておいたフォルダに移動させ、その画像を画面に出力するというものです。

<?php
if($_SERVER['REQUEST_METHOD']==='POST'){
move_uploaded_file($_FILES['image']['tmp_name'],'./images/test.png');
header ('Content-Type: image/png');
$img = imagecreatefrompng('./images/test.png');
imagepng($img);
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>

  <form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="image">
    <input type="submit" value="upload">
  </form>

</body>
</html>

①
実際の画像を投稿してみると、うまくいく場合とうまくいかない場合があります。うまくいかない場合は下の画像のような画面になります。

また実際に投稿してみた画像でうまくいった画像はこれで

うまくいかなかった画像はこれです

ファイルの形式はどちらともpngで、ファイルの大きさはどちらとも同程度です。
またほとんどの画像は黒いだけの画面が出力され、画像がうまく出力されるのは極稀です。
これは一体どうしてなのでしょうか？

②
フォームから投稿された画像を画面に出力すると、画像はおのずと真ん中に配置され、その周りは黒くなってしまいます。またフォームも消えてしまいます。

参考ウェブサイト

リンクのウェブサイトを参考にしながら勉強をしているのですが、リンクのウェブサイトにのっているようには画像が出力されません(画面が白く、画像が左上によるような配置にはならない)。
どうすればフォームは消えず、リンク先のような表示にできるのしょうか？

行動規範の内容に同意します

回答3件

header ('Content-Type: image/png');ってしておきながら、
ふつーにhtml出力しているのがおかしい。
っていうか、投稿フォームと結果表示を々phpソースで実現しているのかな。
画像を出力したら、後ろの投稿フォーム表示箇所に処理が飛ばないようにしたらいいんでないかな。
でも、jpegを受信してもheader ('Content-Type: image/png');なら
うまく表示されないだろうね。

投稿2018/08/22 10:34

編集2018/08/22 10:37

退会済みユーザー

総合スコア0

coffee_2018

2018/08/22 12:06

>>0 header ('Content-Type: image/png');ってしておきながら、ふつーにhtml出力しているのがおかしい。初心者なのであんまりよく分かっていないんですが、「header ('Content-Type: image/png');」と書いた後に<html><body></body></html>とか書いちゃだめだよということでしょうか？

退会済みユーザー

2018/08/22 12:22

HTTPヘッダーの意味、わかってますか？サーバーからwebブラウザに対して、どんな内容をこれから送るのか、という情報の一つなので、そこでウソを送るとwebブラウザの実装によってはおかしなことになってしまいます。投稿フォームの中にIFRAMEでIMGタグ入りHTMLを表示するとかでも要求は満たせそうな気がしますが如何に？

coffee_2018

2018/08/22 13:15 編集

>>HTTPヘッダーの意味、わかってますか？ HTTPリクエストに含まれているあれだったよねくらいの解釈です...。「header ('Content-Type: image/png');」はコンテンツがPNG画像であることをブラウザーに知らせてるよくらいの解釈でした。<html>で囲われた部分はhtmlとして読み込んでくれるんだろうなあとか考えていました。ということであんまり考えてませんでした、ごめんなさい...。 header ('Content-Type: image/png')と書くと、それ以下のコードがpng画像の情報として扱われるということですよね？(合っていればイエス、間違っていればnoと返答してもらえると助かります)。

coffee_2018

2018/08/22 13:37

>>投稿フォームの中にIFRAMEでIMGタグ入りHTMLを表示するとかでも要求は満たせそうな気がしますが如何に？めっちゃアホなのでINFRAMEの意味がよく分かっていないんですが、例えば<img src="">を使って画像を引っ張ってくればいいとかそういう話でしょうか...？

退会済みユーザー

2018/08/22 13:48

質問者さんの「やりたいこと」が、様々な解釈ができそうな余地があり、そのためにズバリこうやりましょう、とは言えない状況です。こういうときは、こういう画面にしたい、こういう機能にしたいと、ゴールイメージを第三者にもわかりやすくまとめていただけると良いかと思います。

行動規範の内容に同意します