【助けてください】POST受信の画像をリサイズ表示する方法

解決済

質問者：kurouz
質問日時：2007/06/23 19:06
回答数：2件

お忙しい中お読み頂き、本当にありがとうございます。
プログラムに精通した方のお力が必要です。どうか一読ください。

現在PHP+Javascriptで、
(1)同ページで画像をリサイズして読み取る
(2)確認画面でリサイズされた画像を表示する
といったプログラムを作成しています。

先日この掲示板で大変親切なアドバイスを頂き、
(1)についてはできたのですが、
(2)の方法が分からない状態です。

【現在の問題点】
送信後のページで、画像は表示されるが、
画像サイズが大きいと、元の画像が一瞬表示されてしまう。

【希望する改善点】
リサイズされた状態の画像しか表示されないようにしたい。
※どのようなコード記述でも構いません。

徹夜を繰り返して調べましたが、
私一人では解決できませんでした…。

下記作成中のスクリプトになります。
些細なアドバイスでも、大変嬉しいです。
どうかお力を貸してください。

□□□□　スクリプト　□□□□
<?php
extract($_POST);extract($_GET);

############### 送信【前】のページ ########################
if($mode == "first"){
echo<<<EOD
<html>
<head>
<script type="text/javascript"></script>
</head>
<body onload="init();">
<form method="POST" action="$_SERVER[PHP_SELF]?mode=second">
<input type="file" onChange="dispImage(this.value);" name="gazou"><br />
<img id="p1"/><br /><br />
<input type="submit" value="確認画面へ" style="background:#ffcc99;color:black;">
</form>
</body>
</html>
EOD;
exit;
}

############### 送信【後】のページ ########################
if($mode == "second"){
$gazou = $_POST[gazou];
echo<<<EOD
<html>
<head>
<script type="text/javascript"></script>
<body onload="init();">
<IMG src="$gazou" id="image1">
</body>
</html>
EOD;
exit;
}

?>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： himajin100000
回答日時：2007/06/23 19:39

ども。

Q3102596で回答し，
Q3105481にも登場したhimajin100000です。こんにちは。

サーバにあげるとできねーやってな話をQ3105481でしたつもりでしたが・・・出来たのかな？運営からのメール届いてないかもしれないけど。(汗

===
閑話休題。俺はPHPを理解はしていないから、検証はしていないけど、
たぶん原因はimg要素を含む文書を【読み込み終わって元のサイズで表示されてから】body要素のonloadイベントが発生するため。

だからPHPからXHTMLで出力する段階では
<p id="resizedimage"><img src="$gazou" id="image1" alt="" /></p>
とか出力した上で

headの子要素として

<style type="text/css">

#resizedimage{
display:none;
/*
visibility:hidden;
の方が場合によっては適切かも
*/

}

んでもって、init関数で
p.height,p.widthが代入された後に

var pE = document.getElementById("resizedimage");
pE.style.display = "block";

とかやって戻せばいけるかも。・・・・とか思うんだけど？
==================================
ところで、ここからは小言。(多いけど)
★前回のソースにきちんと書いたのに
DOCTYPE宣言と名前空間宣言を何故消したの！？かなり重要なのに。
★前半はbr要素の省略記法から考えるにXHTMLなのに
後半はHTMLなの！？(IMG要素が大文字で、かつ終了タグがない)
★img要素にはalt属性が必須
★CSS2の仕様を見ると
http://www.y-adagio.com/public/standards/tr_css2 …

>置換要素 (IMG, OBJECT), スクリプト要素(SCRIPT, APPLET), フォーム制御要素及びフレーム要素などのいくつかのHTML要素は，CSS2では完全な表示を表現できない。

とか書かれていて，img要素のdisplayプロパティをnone;に設定した後，
何に戻していいかわからなかったのでp要素でくくって代用させてもらった。ごめん。
★HTMLとXHTMLの違いとしてscript要素やstyle要素の内容モデルが(#PCDATA)となっていて、色々と厄介なのでXHTMLで出力するときには
外部ファイルにした方が良い。

- 0
- 件

通報する

この回答へのお礼

himajin100000様

お礼が遅くなり申し訳ありません。
何とか仕様を変えて、満足のいくプログラムが作れました。

本当にありがとうございます。
まだ未熟ですが、これから勉強して、
himajin100000様のように博識になりたいと思っています。

ありがとうございました！

通報する

お礼日時：2007/07/11 17:04

No.2

回答者： himajin100000
回答日時：2007/06/24 00:23

訂正あり:

#1でstyle要素の終了タグ書き忘れた。
前回の俺の回答でimg要素にalt属性を書いてない

#うーん、一応サンプルっぽいものは作ってあるんだけど・・・
今ひとつなんだよな・・・

この回答への補足

himajin100000様

度々のご回答、本当にありがとうございます！

前回の質問と重複しているのに関わらず、
ここまで丁寧にして頂き、何とお礼を言えばいいのか。
感謝しきれません。

以下、報告させてください。

【前回のプログラムについて】
お伝えせずに失礼しました。無事サーバーで稼動できています。

【今回のプログラムについて】
昨日から何度も試行錯誤をしているのですが、どうも上手くいきません。私なりに考えてみた所、onchangeなどがないのに、function init(){があるからなのかなと。

POST送信した変数をfunctionに流し込めば、いけそうな気もするのですが、調べて見た所とても難しそうでした。
（javascriptでのPOST送信も同じ）

■参考になるかも知れないページ
http://codeweb.seesaa.net/article/7762344.html
このページではinline要素で、データを流し込んでいます。
functionにデータを流せれば、応用できるかも知れません。
（やり方がわからないのですが・・・）

★質問
ページ中にある、
document.getElementById("s_img").src= "file:///" + objimg.value;
を応用したいと思っているのですが、
単にdocument.getElementById("s_img").src= "画像パス";
だと上手くいかないのは何故でしょうか。

javascriptには疎いため、
●"file:///"
●.value　←　相当に基礎だと思うのですが・・・
の意味、活用法を教えて頂けますと大変助かります。
（何度も質問すみません）

【他のアドバイスについて】
★DOCTYPE宣言と名前空間宣言を何故消したの！？
失礼しました。実はHTMLの知識が乏しく、
<html>でも動くからいいかなと思ってしまいました。
※ただ、サーバー用のスクリプトには記述しております

★前半はbr要素の省略記法から考えるにXHTMLなのに
後半はHTMLなの！？
これも同様に知識が乏しいためです。
< />とすべきなんでしょうが・・・。

HTMLと、上位以外の追加アドバイスは、
今後勉強を重ねて、実践します。

himajin100000様に教えて頂けなかったら軽視する所でした。
本当にありがとうございます。

以上、非常に長くなってしまいましたが、
何卒、追加アドバイスをお願い致します。