- ベストアンサー
【助けてください】POST受信の画像をリサイズ表示する方法
- 現在PHP+Javascriptで、同ページで画像をリサイズして読み取り、確認画面でリサイズされた画像を表示するプログラムを作成しています。
- 送信後のページで、画像は表示されるが、画像サイズが大きいと、元の画像が一瞬表示されてしまうという問題があります。
- リサイズされた状態の画像しか表示されないようにする改善点を探しています。
- kurouz
- お礼率68% (40/58)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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様に教えて頂けなかったら軽視する所でした。 本当にありがとうございます。 以上、非常に長くなってしまいましたが、 何卒、追加アドバイスをお願い致します。
関連するQ&A
- 同じページで画像をリサイズする方法を教えてください。
お忙しい中お読み頂きありがとうございます。 javascriptで、その場でアップロードした画像を リサイズして表示するスクリプトを作っているのですが、 どうしても解決できない問題があります。 【問題】 最初に画像をアップロードした時の画像サイズが、 もう一度アップロードした時に反映されてしまうのです。 （あるいは最初の画像サイズが指定したサイズにならない） onChangeで読み込んでいるのが原因かも知れませんが、 どんなに調べても対処法がわかりません。 ページ更新などせずに、繰り返しアップロードしても、 うまく画像がリサイズする方法を是非教えてください。 【追記】 また、もしお分かりでしたら、 リサイズ方法やコード記述が正しいのかも教えて頂けると大変嬉しいです。 （若干綺麗にリサイズされな場合があるので） 以下コードになります。どうか宜しくお願いします。 <script type="text/javascript"><!-- function dispImage(sSrc) { document.p1.src = sSrc; document.p1.height; document.p1.width; if(document.p1.width > '150'){ document.p1.height = (document.p1.height / document.p1.width) * '150'; document.p1.width; } } // --></script> <INPUT type="file" onChange="dispImage(this.value);"><BR> <IMG name="p1">
- ベストアンサー
- JavaScript
- HTML5での画像表示について
HTML５を勉強しはじめたばかりの者です。 http://nigohiroki.hatenablog.com/entry/2013/01/04/025502 ここのサイトみながらラインと四角を表示することはできたのですが、 画像を表示することができません。 <!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <title>canvasApp</title> </head> <body onload="init()"> <canvas id="first" width="200" height="200"></canvas> <script type="text/javascript"> var canvas = document.getElementById('first'); var ctx = canvas.getContext('2d'); function init(){ var img = new Image(); img.src = "01.jpg"; ctx.drawImage(img, 100, 100, 200, 200); } </script> </body> </html> どこがおかしいのかさっぱりわかりません。 試しに</body>の前に<img src="01.jpg">と入れるとなぜか表示できるのですが、 外すと表示できなくなります。 よろしくお願いします。
- ベストアンサー
- HTML
- HTMLの画像のリンクについて
ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？ 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- 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
- html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
- このソースを直して！【JavaScript】
JavaScriptで、「画像をクリックしたらその画像を交互に大きくしたり小さくしたりする」というプログラムを書いたのですが、２回クリックしたら画像をクリックしても何も起こらなくなってしまいました。どうしたら解決するでしょうか？ <html><head><title>test</title> <script type="text/javascript"><!-- x=128; y=128; function kaeru(){ document.images["gazou"].height = x; document.images["gazou"].width = y; if(x=64){x=128; y=128;} if(x=128){x=64; y=64;} } //--></script> </head><body> <a href="JavaScript:kaeru()"> <image src="co.gif" id="gazou" width="64"height="64"> </a> </body></html> 回答よろしくお願いします。 ちなみに if(x=128){x=64; y=64;} の所はelseにしようと思っていたのですが、elseにしたらそのelse文が実行されませんでした。
- ベストアンサー
- JavaScript
- javascript/画像複数表示について
初めまして。 javascriptは何も知らないのですが、 業務で必要となり、困っております。 どなたかご教示下さい。 ■動かない 下記※の記述をしたのですが、 一つだけだと動くのですが、複数同じものを何個もhtml内に記述すると、 動作しません。 察するにファイル名等の指定が必要なのかな… なんて思うのですが、その方法がわかりません。 WEBサイト内でサムネイルをクリックすると、 大きな画像が選定するファイル毎に切り替えるスクリプトです。 ■現状の記述内容 <html> <head> <title></title> <script type="text/javascript"> <!-- function Imgche(ado) { document.space.src=ado; } // --> </script> </head> <body> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> </body> </html>
- 締切済み
- ネットトラブル
- [PHP]GDを利用した画像リサイズについて
[PHP]GDを利用した画像リサイズについて GDを利用した画像リサイズ処理を行うクラスを作ったのですが、 以下のようなエラー（文字化け）が出てしまい画像出力することができません。 有識者の方、どうか知恵をお貸しください。宜しくお願い致します。 ????JFIF??;CREATOR: gd-jpeg v1.0 (using IJG JPEG v70), quality = 75 ??C $.' ",# (7),01444 '9=82<.342??C 2! !22222222222222222222222222222222222222222222222222??II"?? ???}!1AQa"q2???#B??R??$3br? %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz??????????????????????????????????????????????????????????????????????????? ???w!1AQaq"2?B???? #3R?br? -------- 以下省略 ---------- ◆作成したPHPファイル ・test.php <?php require_once 'Image.php'; $path = './400x300.jpg'; $r = new Image($path, 75); $r->resize(75); ?> ・Images.php <?php class Image{ var $new_width; var $path; function Image($path, $new_width){ @header("Content-type: image/jpeg"); $this->path = $path; $this->new_width = $new_width; } function resize(){ global $new_width; global $path; // 画像パス $image = imagecreatefromjpeg($this->path); // 画像のサイズを取得 $width = 150; $height = 150; $rate = $this->new_width / $width; $new_height = $rate * $height; $thumb = imagecreatetruecolor($this->new_width, $new_height); imagecopyresized($thumb, $image, 0, 0, 0, 0, $this->new_width, $new_height, $width, $height); // imagecopyresampled($thumb, $image_path, 0, 0, 0, 0, $this->new_width, $new_height, $width, $height); imagejpeg($thumb, null, 75); imagedestroy($image); } } ?> ◆環境と状況 ・サーバ：WindowsXP（XAMPPを利用してローカル環境を構築） ・phpinfo()にて、GD Support=enabled、JPEG Support=enabledを確認 ・ステップ実行(デバック)にてimagejpeg($thumb, null, 75);まで問題なく実行可能。 ※imagejpeg($thumb, null, 75);実行後上記文字列が出力される。 ・コメントアウト個所のimagecopyresampledでも動作結果は同じ。 ・参考にしたサイト http://goodjob.boy.jp/chirashinoura/id/79.html 恐れ入りますが、ご回答お願い致します。
- ベストアンサー
- PHP
- 画像の別ウィンドでの拡大表示をやりたいが・・・
Ｋｏｏｔｓｕｋｉと申します。 初めて質問させていただきます。 javascriptを勉強しはじめたものです。 ブログで画像の別ウィンドでの拡大表示をやりたくjavascriptでfunctionを定義しました。しかし、エラーになってしまいうまくいきません。どなたか原因を教えていただけないでしょうか。 まずhtmlは以下です。 <img src="http://...AAAAs.jpg" onclick="largeImage(this)"> 次にfunctionの定義は以下です。 ブログ上のサムネール画像をクリックしたときには、lergeImageで900×675のウィンドゥを開き、そこにオリジナル画像を100%縮小(?)で表示します。同時に画面の左上に拡大マーク画像を表示し、そこがクリックされたら同じウィンドゥを使って縮小なしで再表示しようと思っています。しかし、拡大マーク画像をクリックすると、ランタイムエラー：行番号0で「オブジェクトを指定してください」とランタイムエラーになってしまいます。どこがおかしいのでしょうか。よろしくお願いします。 <script type="text/javascript"> <!-- var lisrc = ""; function largeImage(img){ var objImg = new Image(); objImg.src = img; var img_wh_hi = objImg.height / objImg.width; var base_wh_hi = 675 / 900; img.src.match(/^(.+)s\.([^\.]+)$/); lisrc = RegExp.$1 + "." + RegExp.$2; newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" width="100%" onClick="window.close()"alt="クリックするとウィンドゥを閉じます。"><img src="http://blog-imgs-19.fc2.com/....../kakudai.jpg" onClick="maxImage()" alt="さらに拡大" style="position:absolute; top:10px; left:150px; z-index=2"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } function maxImage(){ newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" onClick="window.close() alt="クリックするとウィンドゥを閉じます"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } // --> </script>
- ベストアンサー
- JavaScript
- 画像切り替える&画像何千枚でもコード増やさない方法
html上に表示させた画像をクリックすると、画像を切り替えるプログラムを作りたいのですが、 うまく動作しません。 １つ目の質問は、 document.images[]の方法もありますが、正しくなく互換がないそうなので使いたくありません。 document.getElementById()で画像を切り替えるにはどうしたらいいのでしょうか？ ２つ目の質問ですが、 このプログラムは6枚の画像が切換えの対象になっていますが、 これが300枚とかになるとプログラムが増えて大変です。 GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg"; という風にしているところを var GAZO = new Array(); for(n=0; n<6; n++){ GAZO[n] = new Image(50,50); GAZO[n].src = "n.jpg"; } という風にすればできると思ったのですが、できませんでした。 n.jpgが""で囲まれて変数のnがただの文字列と見られているのかもと思い、 'GAZO[n] = new Image(50,50); GAZO[n].src = '+'"'+n+'.jpg'+'"'; このようにしてみましたがダメでした。 画像の枚数が何千枚になってもプログラムが増えない方法はありますか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript"> <!-- var Bifor = new Array(); Bifor[0] = new Image(50,50); Bifor[0].src = "befor0.jpg"; Bifor[1] = new Image(50,50); Bifor[1].src = "befor1.jpg"; Bifor[2] = new Image(50,50); Bifor[2].src = "befor2.jpg"; Bifor[3] = new Image(50,50); Bifor[3].src = "befor3.jpg"; Bifor[4] = new Image(50,50); Bifor[4].src = "befor4.jpg"; Bifor[5] = new Image(50,50); Bifor[5].src = "befor5.jpg"; function first(){ for(i=0; i<6; i++){ 'document.getElementById("after' + i + '").src' = Bifor[i].src; } } var GAZO = new Array(); GAZO[0] = new Image(50,50); GAZO[0].src = "0.jpg"; GAZO[1] = new Image(50,50); GAZO[1].src = "1.jpg"; GAZO[2] = new Image(50,50); GAZO[2].src = "2.jpg"; GAZO[3] = new Image(50,50); GAZO[3].src = "3.jpg"; GAZO[4] = new Image(50,50); GAZO[4].src = "4.jpg"; GAZO[5] = new Image(50,50); GAZO[5].src = "5.jpg"; function change(m){ 'document.getElementById("after' + m + '").src' = GAZO[m].src; } //--> </script> </head> <body onload="first()"> <form name="jirei" action="#"> //actionは必須。しかしに他に入れるものがないので便利な#を入れる <GAZO src="title.jpg"> <table> <tr> <td><img src="befor0.jpg" width="50" height="50" id="after0" onclick="change(0)"></td> <td><img src="befor1.jpg" width="50" height="50" id="after1" onclick="change(1)"></td> <td><img src="befor2.jpg" width="50" height="50" id="after2" onclick="change(2)"></td> </tr> <tr> <td><img src="befor3.jpg" width="50" height="50" id="after3" onclick="change(3)"></td> <td><img src="befor4.jpg" width="50" height="50" id="after4" onclick="change(4)"></td> <td><img src="befor5.jpg" width="50" height="50" id="after5" onclick="change(5)"></td> </tr> </table> <input type="button" value="元に戻す" onclick="first()"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
himajin100000様 お礼が遅くなり申し訳ありません。 何とか仕様を変えて、満足のいくプログラムが作れました。 本当にありがとうございます。 まだ未熟ですが、これから勉強して、 himajin100000様のように博識になりたいと思っています。 ありがとうございました！