ローカルに保存されている任意の画像を選択(input type=fileなどで)
すると、テキストボックスにその画像の縦横サイズを表示するといった
事をやりたいのですが、Javascriptで実現可能でしょうか?

img.src = "ファイルパス";
img.height;
img.width;

でサイズ取得は可能ですが、ファイルパスを直書きするのではなく、
あくまで、任意の画像を選択して取得したいです。

わかる方がいらっしゃいましたらご教授いただきたいと思います。
よろしくお願いします。

A 回答 (2件)

No.1の者です。



動作環境を書いておりませんでしたね… 失礼しました。
このスクリプトはInternet Explorer 7 or 8で動作します。
すべてのブラウザを試したわけではありませんが、ブラウザによってはファイル選択部品の動作がまちまちなので、動作しないかもしれません。
Firefox 3の場合は、ファイル選択フォームの戻り値がファイル名のみのため、うまく動きません。
テキスト入力フォームにして、ファイルパスを手入力すれば動作しますが…あんまり使い勝手がいいとはいえません。
下記はその例です。
<html>
<head>
<script language="JavaScript">
var img = new Image();
var d = 0;

function chkimg()
{
m = document.form.fname.value;
ms = "file:///" + m.replace(/\\/, "/");
img.src = ms;
setTimeout('show()',100);
d = 0;
}

function show()
{
if(img.width == 0){
d = d + 1;
if(d > 30){
alert(img.src + " :取得できませんでした…");
}else{
setTimeout('show()',100);
}
}else{
alert(img.src + "=" + img.width + "," + img.height);
}
}
</script>
</head>
<body>
<form name=form>
<input type=text name=fname><input type=button value="表示" onclick='chkimg()'>
</form>
</body>
</html>

もし、ブラウザなどの環境によらず正確な値を得たいのであれば、サーバ側で処理すべきだと思います。
    • good
    • 0

こんにちは。



img.srcにinput type=fileで指定したファイルを設定して
実行させてはいかがでしょう。

<html>
<head>
<script language="JavaScript">
var img = new Image();

function chkimg()
{
img.src = document.form.fname.value;
setTimeout('show()',1000);

}

function show()
{
alert(document.form.fname.value + "=" + img.width + "," + img.height);
}
</script>
</head>
<body>
<form action="javascript:chkimg()" name=form>
<input type=file name=fname><input type=submit value="表示">
</form>
</body>
</html>

setTimeoutを使っているのは、JavaScriptを実行中は画像の取得が行われず、img.widthとimg.heightの値がセットされないため、一旦スクリプトを終了させる必要があるからです。

この回答への補足

MoguraSE様

的確でわかりやすい回答をありがとうございます!
ただ、教えていただいた通りでスクリプトは実行できたのですが、
取得値が幅、高さ共に0pxになってしまいます。

当方でも調べてみますが、こちらの解決もわかるようであれば
ご教授願いたいのですが・・・

厚かましくて申し訳ございませんが、よろしくお願いします。

補足日時:2009/05/17 00:55
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

QIE6でmax-width:100px; max-height:100pxを実現にするには

BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。
画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。
しかしmax/min-height/widthはIE6に対応しません。
そこで▼以下の2つを試してみました。
・max-width in Internet Explorer(IE独自のexpressionを利用)
 http://www.svendtofte.com/code/max_width_in_ie/
・minmax.js module(Java Scriptを利用)
 http://doxdesk.com/software/js/minmax.html
ただしこれらの使用方法に従って記載しても、max-width:100px; height:100px(縦長の画像は100px×100pxに)またはwidth:100px; max-height:100px(横長の画像は100px×100pxに)となってしまいます。
Java Script、CSS、または両方を使って解決できる方法がありましたら教えていただけませんでしょうか。
よろしくお願いいたします。

BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。
画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。
しかしmax/min-height/widthはIE6に対応しません。
そこで▼以下の2つを試してみました。
・max-width in Internet Explorer(IE独自のexpressionを利用)
 http://www.svendtofte.com/code/max_width_in_ie/
・minmax.js module(Java Scriptを利用)
 http://doxdesk.com/soft...続きを読む

Aベストアンサー

#1です。

> これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する
> ことは難しいでしょうか。

これではどうでしょう。個々のサムネイルごとに修正をかけるので、少しはましかと……。

<html>
<head>
<style type="text/css"><!--
/* 100x100の領域だけ取って、表示しない。 */
img.thumb { visibility: hidden; width: 100px; height: 100px; }
/* ただし、これではスクリプトOFFだと全く表示されない。 */
--></style>
<script type="text/javascript"><!--
function func(img) {
/* 一旦縦横とも"auto"にして実寸を取得。長い方を"100px"に再設定。そして表示。 */
img.style.width = "auto";
img.style.height = "auto";
if (img.width > img.height) {
if (img.width > 100) img.style.width = "100px";
} else {
if (img.height > 100) img.style.height = "100px";
}
img.style.visibility = "visible";
}
--></script>
</head>
<body>
<p>
<img class="thumb" src="適当な画像1" onload="func(this)">
<img class="thumb" src="適当な画像2" onload="func(this)">
<img class="thumb" src="適当な画像3" onload="func(this)">
</p>
</body>
</html>

#1です。

> これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する
> ことは難しいでしょうか。

これではどうでしょう。個々のサムネイルごとに修正をかけるので、少しはましかと……。

<html>
<head>
<style type="text/css"><!--
/* 100x100の領域だけ取って、表示しない。 */
img.thumb { visibility: hidden; width: 100px; height: 100px; }
/* ただし、これではスクリプトOFFだと全く表示されない。 */
--></style>
<script type="text/javascript"><!--
function func(im...続きを読む

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

Q&= ~0x0c; &= ~0x03; |=1;

JavaScriptで分からないコードがあるので教えてください。


■変数設定
var hoge = 0;


■変数格納
・キーを押した時の条件分岐
  ~なら hoge |= 1;
  または hoge |= 2;
  または hoge |= 3;
  または hoge |= 8;

・キーを離した時の条件分岐
  ~なら hoge &= ~0x0c;
  または hoge &= ~0x03;


■変数使用
・swithch文の条件分岐に利用
  (hoge&0x03)
  (hoge&0x0c)


■質問
・どういう意味でしょうか?
・文字コード?
・ビット演算?

Aベストアンサー

ビット演算してるわね

x = x + a

x += a
って書くことができるの

つまり
hoge |= 1

hoge = hoge | 1
のことね

~はNOTのこと

0x
はアスキーコードの16進数表記ねきっと

0x0c は改ページを意味していて
0x03 は文章の最後を意味している
と思われるわ
全文がないので推測だけど

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Qの○をランダムに!

1.jpgから30.jpgの30枚の画像はimagesという名のフォルダにあり、
それらの画像をJavaScriptで画像を1枚目からランダムにフェードインするものを作りたく、
http://asamuzak.jp/html/302を参考にして、
2枚目からランダムにフェードインすることはできました。
しかし、1枚目が必ず同じ画像が表示されてしまいます。
body内の<img src"1.jpg" id="">
の部分が表示される1枚目のようです。
1.jpgを2.jpgにすると2.jpgが最初に表示されます。

1枚目からランダムにフェードインするものを作るには、
この<img src"1.jpg" id="">を<img src"ランダムな整数.jpg" id="">
にすればいいのでは? と思いました。

自分が考えたコードは、
下記コードの場合の動作は、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title></title>
<script language="JavaScript">
<!--
var n = Math.floor((Math.random() * 29))+1;
//-->
</script>
</head>
<body>
<img src="../images/1.jpg" />
</body>
</html>

1.jpgが毎回必ず表示されます。

ランダムな整数を取得できるJavaScriptを作り、
var n = Math.floor((Math.random() * 29))+1;
その整数を上記コードの
<body>
<img src="../images/1.jpg" />
</body>
の部分を
<body>
<img src="../images/n.jpg" />
</body>
とvar nを入れてやれば
1~30のランダムな整数が入って
ページを更新するたびに画像が変わると考えました。

<img src="../images/n.jpg" />の書き方を直せばいいと思うのですが、
どのようにしたらいいのでしょうか? よろしくお願いします。

1.jpgから30.jpgの30枚の画像はimagesという名のフォルダにあり、
それらの画像をJavaScriptで画像を1枚目からランダムにフェードインするものを作りたく、
http://asamuzak.jp/html/302を参考にして、
2枚目からランダムにフェードインすることはできました。
しかし、1枚目が必ず同じ画像が表示されてしまいます。
body内の<img src"1.jpg" id="">
の部分が表示される1枚目のようです。
1.jpgを2.jpgにすると2.jpgが最初に表示されます。

1枚目からランダムにフェードインするものを作るには、
この<img src"1....続きを読む

Aベストアンサー

JavaScriptのdocument.writeln
でタグを直接出力すればいいです。

<body>
<script language="JavaScript">
document.writeln("<img src='../images/" + n + ".jpg' />");
</script>
</body>


http://www.tohoho-web.com/js/document.htm#writeDoc
詳しくはここ参照。

”と’ に注意。

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

QIMGタグのsrcを同時に変更することができない

radioボタンを押すと画像をそれぞれ切り替えるものを作りたく、試してみたのですが思うように動きません。最後のiB.children[i].src = vvv[j] + ".jpg";が1つのIMGタグに対してしか効いていないせいのようです。複数のIMGタグのsrcも同時に変更していきたいのですがどのようにしたら良いのでしょうか。

<html xml:lang="ja" lang="ja">
<head>
<title>radioボタンを押して3×3パターンの画像を切り替える</title>
<script type="text/javascript">
function imgChange(evt){
var t = evt.target || evt.srcElement;
if(t.nodeName != "INPUT") return;

var inp = t.parentNode.getElementsByTagName("input");
var nnn = [], vvv = [];
for(i=0; node=inp[i++];){
if(node.type == "radio" && node.checked) {
nnn.push(node.name);
vvv.push(node.value);
}
}

var iB = document.getElementById('imgBOX');
var iBlen = iB.children.length;
for(i=0; iBlen>i; i++){
//処理前のalert
alert("before : src = "+iB.children[i].src);
//IMGタグのsrc通りの結果に。
if(iB.children[i].tagName != "IMG") continue;
for(j=0, node=nnn[j]; inp.length>j; j++){
if(iB.children[i].name == node){
iB.children[i].src = vvv[j] + ".jpg";
}
break;
}
//処理後のalert
alert("after : src = "+iB.children[i].src);
//一番最初のIMGだけが変更され、残りは変更されず。
}
}
</script>
</head>
<body>
<form action="#" onclick="imgChange(event);">
画像Aの切替⇒
<input type="radio" name="imgA" value="3" checked />
<input type="radio" name="imgA" value="4" />
<input type="radio" name="imgA" value="5" />
<br />
画像Bの切替⇒
<input type="radio" name="imfB" value="6" checked />
<input type="radio" name="imfB" value="7" />
<input type="radio" name="imfB" value="8" />
<input type="radio" name="imfB" value="9" />
<input type="radio" name="imfB" value="10" />
<br />
画像Cの切替⇒
<input type="radio" name="imgC" value="11" checked />
<input type="radio" name="imgC" value="12" />
</form>
<p>----------------------------------</p>
<div id="imgBOX">
画像Aは<img width="20" src="0.jpg" name="imgA" alt="画像A" />
<br />
画像Bは<img width="20" src="1.jpg" name="imfB" alt="画像B" />
<br />
画像Cは<img width="20" src="2.jpg" name="imgC" alt="画像C" />
</div>
</body>
</html>

radioボタンを押すと画像をそれぞれ切り替えるものを作りたく、試してみたのですが思うように動きません。最後のiB.children[i].src = vvv[j] + ".jpg";が1つのIMGタグに対してしか効いていないせいのようです。複数のIMGタグのsrcも同時に変更していきたいのですがどのようにしたら良いのでしょうか。

<html xml:lang="ja" lang="ja">
<head>
<title>radioボタンを押して3×3パターンの画像を切り替える</title>
<script type="text/javascript">
function imgChange(evt){
var t = evt.target || evt.srcElemen...続きを読む

Aベストアンサー

>for(j=0, node=nnn[j]; inp.length>j; j++){
のループ指定が違うのでは?(nodeの値が初期状態から変わらない。jの終了比較はinp.lengthではない)
>break;
ではfor(i=0; iBlen>i; i++){のループから抜け出しているので、結果的に1回しかループしない。(ので、最初の画像しか変わらない)
といったあたりを修正すれば、ご希望の動作になるのでないかと思います。


思うように動作しない理由とは関係ないので、おせっかいながら…
配列は文字列をキーにすることも可能なので、
 nnn[node.name] = node.value
みたいな記憶のしかたをしておくと取り出す時に一発で済むので簡単になるかも。
(同じフォーム内では、nameが異なるのを利用)

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Qimgのsrcに値を設定するには

<img src="photo.jpg" title="" id="2" />
document.getElementById('2').setAttribute('title',代入値);

のようにsrcのほうにも値を設定したいのですが、単純に

document.getElementById('2').setAttribute('src',代入値);

のようにしてもできませんでした。srcに値を設定するにはどうしたらよいでしょうか?

Aベストアンサー

まず、数字だけのidをつけるのは、やめたほうがいいでしょう。(参考URL)

さて、本題ですが、私のところでは
 document.getElementById('2').setAttribute('src','photo2.jpg');
のようにしたところ、上手くいきました…
文字列の前後に「''」をちゃんとつけていますか?

参考までに、他に
 document.getElementById('2').src = 'photo2.jpg';
という、単純な方法もあります。

参考URL:http://www.kanzaki.com/docs/html/htminfo12.html#name-syntax


人気Q&Aランキング

おすすめ情報