- ベストアンサー
【助けてください】POST受信の画像をリサイズ表示する方法
- 現在PHP+Javascriptで、同ページで画像をリサイズして読み取り、確認画面でリサイズされた画像を表示するプログラムを作成しています。
- 送信後のページで、画像は表示されるが、画像サイズが大きいと、元の画像が一瞬表示されてしまうという問題があります。
- リサイズされた状態の画像しか表示されないようにする改善点を探しています。
- kurouz
- お礼率68% (40/58)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ども。 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/sample.html >置換要素 (IMG, OBJECT), スクリプト要素(SCRIPT, APPLET), フォーム制御要素及びフレーム要素などのいくつかのHTML要素は，CSS2では完全な表示を表現できない。 とか書かれていて，img要素のdisplayプロパティをnone;に設定した後， 何に戻していいかわからなかったのでp要素でくくって代用させてもらった。ごめん。 ★HTMLとXHTMLの違いとしてscript要素やstyle要素の内容モデルが(#PCDATA)となっていて、色々と厄介なのでXHTMLで出力するときには 外部ファイルにした方が良い。
その他の回答 (1)
- himajin100000
- ベストアンサー率54% (1660/3060)
訂正あり: #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様に教えて頂けなかったら軽視する所でした。 本当にありがとうございます。 以上、非常に長くなってしまいましたが、 何卒、追加アドバイスをお願い致します。
お礼
himajin100000様 お礼が遅くなり申し訳ありません。 何とか仕様を変えて、満足のいくプログラムが作れました。 本当にありがとうございます。 まだ未熟ですが、これから勉強して、 himajin100000様のように博識になりたいと思っています。 ありがとうございました！