- ベストアンサー
同じページで画像をリサイズする方法を教えてください
- javascriptで、その場でアップロードした画像をリサイズして表示するスクリプトを作っているのですが、どうしても解決できない問題があります。
- 最初に画像をアップロードした時の画像サイズが、もう一度アップロードした時に反映されてしまうのです。（あるいは最初の画像サイズが指定したサイズにならない）
- onChangeで読み込んでいるのが原因かも知れませんが、どんなに調べても対処法がわかりません。ページ更新などせずに、繰り返しアップロードしても、うまく画像がリサイズする方法を是非教えてください。
- kurouz
- お礼率68% (40/58)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- himajin100000
- ベストアンサー率54% (1660/3060)
- himajin100000
- ベストアンサー率54% (1660/3060)
- himajin100000
- ベストアンサー率54% (1660/3060)
関連するQ&A
- 【助けてください】POST受信の画像をリサイズ表示する方法
お忙しい中お読み頂き、本当にありがとうございます。 プログラムに精通した方のお力が必要です。どうか一読ください。 現在PHP+Javascriptで、 (1)同ページで画像をリサイズして読み取る (2)確認画面でリサイズされた画像を表示する といったプログラムを作成しています。 先日この掲示板で大変親切なアドバイスを頂き、 (1)についてはできたのですが、 (2)の方法が分からない状態です。 【現在の問題点】 送信後のページで、画像は表示されるが、 画像サイズが大きいと、元の画像が一瞬表示されてしまう。 【希望する改善点】 リサイズされた状態の画像しか表示されないようにしたい。 ※どのようなコード記述でも構いません。 徹夜を繰り返して調べましたが、 私一人では解決できませんでした…。 下記作成中のスクリプトになります。 些細なアドバイスでも、大変嬉しいです。 どうかお力を貸してください。 □□□□ スクリプト □□□□ <?php extract($_POST);extract($_GET); ############### 送信【前】のページ ######################## if($mode == "first"){ echo<<<EOD <html> <head> <script type="text/javascript"><!-- var image; function init(){ image = new Image(); } function dispImage(sSrc) { var p = document.getElementById('p1'); var mx = 150; image.src = sSrc; if(image.width > mx){ p.height = (image.height / image.width) * mx; p.width = mx; p.src = sSrc; }else{ p.height = image.height; p.width = image.width; p.src = sSrc; } } // --></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"><!-- function init(){ var p = document.getElementById('image1'); var mx = 150; if(p.width > mx){ p.height = (p.height / p.width) * mx; p.width = mx; }else{ p.height = p.height; p.width = p.width; } } // --></script> <body onload="init();"> <IMG src="$gazou" id="image1"> </body> </html> EOD; exit; } ?>
- ベストアンサー
- JavaScript
- jquery cycleで画像リサイズ
jquery cycle pluginを使用して、画像のスライドをしています。 画像を画面中央に全画面表示をしたいのですが、 スライドする画像のサイズがそれぞれ異なるため、 画像の比率を固定して、縦横のサイズで大きい方を 画面に合わせて表示したいのです。 私が考えたのは、 (全文は載せられません。すみません。) <div id="slideImage"> <img id="slide1" src="test01.gif"> <img id="slide2" src="test02.gif"> ・・・ <img id="slide5" src="test05.gif"> </div> ↑のようにスライドする画像があるとして、 下記のjavascriptでスライドする画像分ループさせて、 id部分を変数にして、縦横どちらかが大きかったら・・・という 計算をしています。 function resize(){ for(var i=1; i<6; i++){ var slideNo = "slide" + i; var w = document.getElementById(slideNo).width; var h = document.getElementById(slideNo).height; if(w >= h){ document.getElementById(slideNo).width = screen.width; }else{ document.getElementById(slideNo).height = screen.height; } } } 確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、 slide2以降をリサイズしてくれません。 ループは確かに回っているし、 if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、 なぜかscreen.width(screen.height)の値が入ってくれません。 jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。 みなさんお力お貸しください！！
- ベストアンサー
- JavaScript
- ページは表示されたけれど、エラーが出ます。
過去の質問を調べたのですが、見つけられなかったので、質問させてください。 自社サイトのページを開くと、ステータスバーに 「ページが表示されましたが、エラーがあります。」と表示されました。 エラーの詳細は下記のとおりです。 ライン:18 文字:51 エラー:')'がありません コード:0 ソースに問題があるのかと思ったのですが、 下記がそのソースです。 <SCRIPT language="javascript" type="text/javascript" src="../js/common_lib.js"></SCRIPT> <SCRIPT type="text/javascript" src="../js/css_junction2.js"></SCRIPT> <SCRIPT language="JavaScript"> <!-- document.write("<img src='http://700700.jp/acc/acclog.cgi?"); document.write("referrer="+document.referrer+"&"); document.write("width="+screen.width+"&"); document.write("height="+screen.height+"&"); document.write("color="+screen.colorDepth+"' alt="">"); // --> </SCRIPT> どこをどう直せばよいのかよくわからないので、 もしお分かりの方がいらっしゃいましたら、 お教えいただけますでしょうか？ よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- max-widthを指定した場合の縦サイズのリサイズ方法
画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。 CMS （Movable Type）でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。 どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか？宜しくお願いします。
- ベストアンサー
- HTML
- 日替わり画像ポップアップ表示
javascriptを使って日替わりで なんとか画像を表示する事ができましたが その画像をclickしたら拡大させるにはどうしたらいいのでしょうか 調べても日替わり画像までしかなくて 困ってます ご存知の方 教えてください。 phpや別の言語を使うのでしょうか <script type="text/javascript" language="javascript"> <!-- d=new Date(); date=d.getDate(); document.open(); document.write('<td width="230" height="219" bordercolor="#003333"><img src="img/himekuri/'); document.write(date); document.write('.jpg" alt="今日のカレンダー" width="230" height="219"></td>'); document.close(); // --> </script> 今現在の内容です
- 締切済み
- JavaScript
- gooブログライターで「画像をリサイズ」しない方法は？
gooRSSリーダーver3.0を使用し始めましたが下記問題で困っています。 ■問題 gooブログライターの「画像をアップロード」で「画像をリサイズ」のチェックを外しても画像がリサイズされてしまいます。 ■データ ファイル：jpg 容量：86KB サイズ： アップロード前 高さ 289pixel 幅 459pixel アップロード後 高さ 201pixel 幅 319pixel ■おしえて下さい gooブログライターの「画像をアップロード」で「画像をリサイズ」しない方法はどうすればよいのでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- ブログ
- UNIXのコマンドラインで動作する画像リサイズツール
現在、サーバ上にhttpでアップロードされた画像をリアルタイムでリサイズして表示するシステムを組んでいます。 そこで画像をリサイズするフィルターを使いたいのですがコマンドラインレベルで ・画像ファイル名 ・変換後ファイル名 ・元ファイル width ・元ファイル height ・変換後ファイル width ・変換後ファイル height を入力として動作するツール（もしくはそれに近いもの）があれば教えてください。 画像ファイルのフォーマットはjpegです。（gif、pngに関してもあれば）
- ベストアンサー
- グラフィックソフト
- 固定枠内への最大画像の貼り付け
HTMLで作成された固定枠内に、CGIを使用して複数の画像データを、 1枚ずつ表示させるのですが、現在の状態では画像データの大きさによってレイアウが不均一になってしまいます。 そこで、JavaScriptを利用して、元画像の縦横比を保ったまま、 任意の大きさの枠の中で、画像データの大きい方の長さが枠内いっぱいになるように表示したいのです。 つまり、 縦横比のそれぞれ違った、フレームと画像があり、 その画像を、フレームの中心部から拡大して行ったとき、 縦横いずれか先にフレームに接する大きさのところまで拡大表示される 大きさで表示させたいのですが。 下記のスクリプトでは、縦横共通の最大値しか指定できません。 縦横それぞれに最大値を指定できるようにし、 上記の様に表示させるには、 どの様な記述方があるでしょうか。 ご教授、宜しくお願いします。 （スクリプト要素） size = 120 ; function resize(id) { if (document.images[id].width > document.images[id].height) document.images[id].width = size ; else document.images[id].height = size ; } （BODY要素） <img src="hoge.jpg" id="sample1" onLoad="resize('sample1')" />
- ベストアンサー
- JavaScript
- 画像縮小プログラムが、最初に読み込んだ時（再読み込みしない場合）動きません。
今javascriptを使って、縦横比を固定したまま画像を縮小するプログラムを作っています。 ソースコードは function keep_max() { for (i in document.images) { if (document.images[i].className == 'small_sale_thumb') { max_width = 100 ; max_height = 110 ; }else { continue; } if ( document.images[i].height > max_height) { now_width = document.images[i].width; now_height = document.images[i].height; factor = max_height/now_height; document.images[i].height = max_height ; document.images[i].width = now_width * factor; } } } それで、このようにして画像を表示しようとします。 <img width="100" class="small_sale_thumb" src="http://hogehoge.co.jp/bc11/u3785993.jpg" /> <script type='text/javascript'> keep_max(); </script> このようにして、他のドメインのサイト（楽天など）の画像を読み込み、 縮小して表示しようとしているのですが、最初に読み込んだ場合、このプログラムが作動しません。 しかも何故か、二回目に読み込んだ場合（同じページを再読み込みした場合等）作動します。 これはいったいどういうことでしょうか？ ちなみに今妥協策として、bodyのonloadタグにもこれを仕込んでいますが、この場合、画像表示から縮小までにタイムラグがあります。 このプログラムを上手く動かす方法or他のクライアントサイドでの縮小の仕方はありませんでしょうか？？ ちなみに縮小したい画像の件数が多いので、負荷対策のためGD等のサーバーサイドでの縮小は考えないようにしています。
- ベストアンサー
- JavaScript
- 複数の.jsファイルって実行できますか？
初心者：Ajax勉強中です。 prototype Rico batefx を一つの画面で使用したいと思っています。 読み込み順はこんな感じになっています －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ <script src="prototype.js" type="text/javascript"></script> <script src="rico.js" type="text/javascript"></script> <script src="bytefx_OS.js" type="text/javascript"></script> <script src="index.js" type="text/javascript"></script> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ index.jsは －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ function k(){ dndMgr.registerDraggable( new Rico.Draggable("sample","box") ); dndMgr.registerDropZone( new Rico.Dropzone("dropbox") ); dndMgr.registerDropZone( new Rico.Dropzone("dropbox1") ); } function start(){ bytefx.size(document.getElementById("txt_box"), {width:600, height:0}, 100); } function n(name,objW,objH){ bytefx.size(document.getElementById(name), {width:objW, height:objH}, 10); } －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 最初に表示される画面ではbatefxのリサイズ処理は正常に動作します。 その後のRicoによる、Draggable、Dropzoneを実行します。 そうすると最初に動作していたbatefxのリサイズ処理が動作しなくなってしまいます。 原因を調べていてもいまいちよくわかりません。 解かる方おりましたら、是非ご教授のほどをおねがいいたします。
- 締切済み
- JavaScript
お礼
himajin100000様 さっそくのご回答ありがとうございます！ 無事上手くできました。 ずっとわからないことだったので、感動しています。 ご多忙の中、これほどまでにご丁寧に教えて頂き、 本当にありがとうございます。