• ベストアンサー

画像データか判断する手段

var data = base64エンコードされた文字列; 正常系では画像データをbase64エンコードしたデータを渡そうと思ってますが、 念のため渡されたデータが画像データなのかチェックをjavascriptでしたいと考えてます。、 しかしその手段がわかりません。 サーバサイドにデータを渡せばなんとか判断できるのですが、、、 javascript(+HTML)にて判断するアイディアを教えて下さい。

質問者が選んだベストアンサー

  • ベストアンサー
  • chie65535
  • ベストアンサー率43% (8526/19383)
回答No.2

>ご紹介いただいたページは事前に拝見しておりましたが、bse64デコードされた文字からバイナリに復元する方法がわからなったです・・ バイナリに復元せずとも「テキストの状態(base64でエンコードされた文字列のままの状態)で、ある程度の判定は可能」です。 ANo.1の回答で示されたサンプルプログラムの、28~36行目を見て下さい。 このプログラムでは、対象を「バイナリ」で読み込んで ・頭の2バイトが「16進数でFF、D8」ならJPEG画像 ・頭の3バイトが「文字でPNG」ならPNG画像 ・頭の3バイトが「文字でGIF」ならPNG画像 ・頭の2バイトが「文字でBM」ならBMP画像 という判定をしています。 これら「16進数でFF、D8」や「文字でPNG」などは「Base64にエンコードしたら、特定の決まった文字列になる筈」です。 なので「Base64のまま、頭の数文字を見れば、画像『らしい』と言う事は判断できます。 ただし、あくまでも『らしい』としか判りません。 正確に画像ファイルかどうか判定するには「ちゃんとバイナリに戻して、ファイルヘッダーが画像ファイルの仕様に従ったバイナリデータなのかチェックする必要」があります。 なお、以下に「Base64のエンコードとデコード」が説明されています。 http://hakuhin.jp/js/base64.html フリーのライブラリに、javascript用の「Base64のエンコードとデコードをするライブラリ」があるので、ネットで検索してみて下さい。

その他の回答 (2)

  • chie65535
  • ベストアンサー率43% (8526/19383)
回答No.3

で、Base64のjavascriptのライブラリは http://user1.matsumoto.ne.jp/~goma/js/base64.html にあります。 使い方は、ソースコードを見て下さい。

  • heburusu
  • ベストアンサー率85% (140/164)
回答No.1

こんにちわ。 バイナリ形式でファイルの先頭数バイトを読み込んで、一応チェックできるようです。 参考URLにはbase64ではありませんが、JavaScriptでイメージの形式をチェックするプログラムが掲載されております。

参考URL:
http://kinsentansa.blogspot.jp/2013/04/javascript.html
muuming2001
質問者

お礼

ありがとうございます。 ご紹介いただいたページは事前に拝見しておりましたが、bse64デコードされた文字からバイナリに復元する方法がわからなったです・・

関連するQ&A

  • JavaScriptだけで画像アップロードし、表示

    JavaScriptだけで画像アップロードし(実際に受け取り)、画面に表示させたいのですが、可能でしょうか? ※JavaScriptしか使えないレンタルサーバでの利用を想定しています 下記を試してみたのですが、うまくいきませんでした ▽【HTML5】File APIを使って、投稿された画像を即時表示する方法【小ネタ】 : アシアルブログ   http://blog.asial.co.jp/1079 ※画像は表示されるのですが、画像ファイルはアップロードされていない(もしくは受け取ることが出来ない) ■質問1 ・画像ファイルパスが、<img src="data:image/jpeg;base64,/9j/4AAQS になるのですが、これは、tmpみたいな場所にアップロードされている、ということなのでしょうか?(FTPで見ても、どこにアップロードされているか確認できませんでした) ■質問2 ・アップロードされたファイルを受け取るための処理は、サーバサイドでしか出来ないということでしょうか? つまり、JavaScript単独だと、画像をアップロードできても、受け取ることが出来ないので、意味がない?

    • ベストアンサー
    • AJAX
  • 画像バイナリデータの処理について

    お世話になります。 ブラウザから、画像データをアップロードし、サーバのデータベース(MySQL)にバイナリデータとして記録した画像データを、AJAXで取得し、ブラウザでJavascriptを使用して表示させたいと考えています。 現在、バイナリデータをAJAXで取得するところまで作成したのですが、” $.' ",#...”といったデータとなっており、文字列として表示されてしまっています。 これをJavascriptで画像データとして認識させる方法はございますでしょうか? よろしくお願いいたします。

  • 画像アップロード時の条件分岐

    HTMLフォームでmultipart/form-dataによりPerlCGIのcgi-lib.plで値を取得するやり方で画像ファイルをWebサーバーのフォルダにアップロードします。 その際例えば600KBより大きければ、「画像が大きすぎます。600KB以下のデータに変更して再度実行してください」というHTMLメッセージを、600KB以下なら保存する、という条件分岐はどう書いたら良いでしょうか? またCGIで判断させるとしたら一旦データを取り込んでから判断するわけですから、ファイルアップロードが実行された後の処理という事で時間がかかりそうなので、ひょっとすると一般的にはJavascriptか何かでHTML側で判断して600KB超のデータなら、そのデータは送らないみたいなことをするのかも・・・もしそうならその記述も教えてください? ちなみにPerlもJavaScriptも初心者レベルですのでお手柔らかな解答お願いします。

    • ベストアンサー
    • Perl
  • imageタグの画像データを取得するには?

    現在とある理由から、imageタグで取得した画像データをBase64エンコードしようとしています。 しかしながら、imageタグのどのプロパティにアクセスすれば画像データそのもの(srcに格納されているurlではなく)が取得できるかわかりません。 どうすればよいのでしょうか?

    • ベストアンサー
    • HTML
  • PHPとjavascriptで共通なエンコード方法

    PHPからjavascriptにバイナリデータ(16バイト程度)を受け渡す 処理を作成しているのですが、うまく動作しないので、相談します。 バイナリデータをエンコードしてPHPからjavascriptに 以下の流れで引き渡しています。 (1)PHPのbase64_encodeでバイナリデータをエンコード (2)エンコードしたデータをjavascriptに出力 (3)javascriptでデータをデコード (3)のデコードには次のページのbase64.jsなど、いくつかの デコード方法を試してみました。 http://www.onicos.com/staff/iz/amuse/javascript/expert/ しかしながら(1)の元のデータと(3)でデコードしたデータが 一致しません。 質問したいのは以下の2点です。 ・PHPのbase64_encodeとjavascriptのbase64エンコードは  一般的に方式が違うのでしょうか。同じbase64なので  同じコードが生成されると考えたのですが、そうでは  ないのでしょうか。 ・base64_encodeでも、その他の方法でもかまわないので  PHPとjavascriptで共通なエンコード方式、あるいは  PHP上のバイナリデータをjavascriptに正しく受け渡す  方法があれば教えて下さい。 よろしくお願いします。

  • データの更新判断

    この方面に詳しくないので用語などに間違いがあるかもしれません SQL Server2008 RC2 を使っています データベースに複数のデータ列が存在してデータ件数(レコード数)は不定です プログラムは VC2010にて自作  ODBC経由でアクセス データベースの構造はある程度自分で加工可能 データベースへの件数の削除・追加・更新は自作プrグラム以外からも行われる 自作プログラム以外には以外には極力影響与えたくない 上記データベースの件数の変化については現状 SELECT COUNT (*) FROM [データベース名]  のポーリングで件数の増減の検出 新規追加の判断に関してはデータ列の中に データ登録日を保存することで それをソートして処理していますが 何処かのデータの一部が更新されたというのを検出することは可能なのでしょうか?   ※ 判断したいのはデータの追加と更新だけで削除されたデータが     どういったものであったかを判断する必要はありません 更新データも全データを都度ポーリングチェックすれば判断はできるでしょうが データ件数によってレスポンス的に使えない代物になると考えています データベースの設定やプログラム的なもので対処できるものなのか 無理なのか(個人的に無理だと考えてる) 可能であればどういった方法で実現できるのか わかる方がいたら教えていただけないでしょうか (無理なら無理で構わない  ->  詳しい方の判断を求めたい) 内容に不足があれば補足させていただきます

  • 画像データが、他のパソコンやサーバー上で表示できなくなってしまいました

    画像データが、他のパソコンやサーバー上で表示できなくなってしまいました・・・ 先日突然、私のパソコンで作成した画像データ(jpg・gif等)を、他のパソコンで開こうとすると、 「ファイルが壊れています」等のエラーが発生し、開けなくなってしまいました。 また、作成した画像を自社サーバー上にアップロードした場合も、 画像がメチャメチャに壊れてしまっており正常に表示されません。 (添付画像のようになってしまいます・・・) 私のパソコンのローカル上では、全く問題なく表示されています。 ★この現象が発生する以前に作成した画像データも、上記同様になります。 また、すべての画像データに発生するわけではなく、ものによっては、 他のパソコンでも正常に開けたり、サーバー上でも表示されたりします。 壊れてしまう画像と、大丈夫な画像の、違いすらわかりません・・・ 画像は、すべてphotoshopCSで作成したものです。 photoshopが原因かと思ったのですが、ためしにペイントブラシで新規に 画像を作成してみたところ、それも上記と同様になってしまいました。 画像データに関する何らかの設定を、自主的に変更した覚えはありません。 正常な画像を作成できていた時と、何も変わっていないと思うのですが・・・ 会社の人から、 画像データが、私のパソコン内にしかない何かのデータや設定を読み込んでしまっているために、 他の環境やサーバー上では表示できないのではないか? と言われたのですが、それが正しいのか、正しいのだとしたらどう対処したらいいのか、 全くわかりません・・・ 使用パソコンのOSはvistaです。 自社サーバーはLinuxサーバーだそうです。 このようなことにあまり知識がないので・・・困っております。 どなたか詳しい方がいらっしゃいましたら、ご回答お願い致します。

  • canvasで作成した画像をperlでアップロード

    恐れ入ります。 function upImg() { var base64 = board1.toDataURL('image/png'); var request = { url: 'https:~canvas.cgi', method: 'POST', params: { image: base64.replace(/^.*,/, '') }, success: function (response) { console.log(response.responseText); } }; Ext.Ajax.request(request); } として、perlで送信された画像データを受け取ってサーバーの任意のディレクトリに保存をしたいのですが、方法が分かりません。 perl側では、単純に open(OUT, ">./upload/gazouURL"); binmode(OUT); while(read($fileName, $buffer, 1024)) { print OUT $buffer; } close(OUT); としています。$fileNameとして受け取るパラメータはjavascriptからどのように送信されているのでしょうか。ご教授いただけたらありがたいです。よろしくお願いいたします。

  • javascriptで画像の一部を切り取る

    今、1枚の画像をマウスで囲んだ部分を自由に切り取るということを、 Javascript+HTML+PHPでやりたいと思っています。 切り取った形をサーバーに残したいと思っています。 マウスの軌跡で線を描くぐらいのことはできますが、それ以上のことができません。 何かヒントを頂けましたら助かります。

  • 画像をランダムにスクリプト

    ホームページをHTMLで作成しております。画像をランダムにスクリプトしてますが、画像のサイズが大きすぎるので、HTMLでサイズ変更する場合の、HTMLをご教授ください。 width="300" height="200"を挿入でいいのでしょうか。 その場合の挿入箇所をお教えください。 現在、下記のHTMLを作成しております。 <script language="JavaScript"> <!-- var image=new Array (); image[0]="s/b/bike1.jpg" ; image[1]="s/h/hatake207.jpg"; var rnd=Math.floor(Math.random()*image.length); document.write(" <img src=' "+image[ rnd ]+ " '> "); //--> </script> 宜しくお願いします。