7

私は頭を悩ませ、選択した画像をウェブサイトで使用しようとしています。

ユーザーがシステムから画像を選択できるようにする単純な Web サイトがあるとします。

<input type="file" id="userImage">

次に、JavaScript でこれを実行してファイルを取得できます。

var userImage = document.getElementById('#userImage').files[0];

質問:

1) userImage を使用できるようになりましたか? キャンバスに描いたり、先にウェブサイトのサーバーにアップロードしたりする必要がありますか?

2) 画像を使用する場合、ウェブサイトは使用するたびに画像をアップロードする必要がありますか、それともメモリに残りますか?

3) イメージがいつ使用できるようになったかをどのように知ることができますか? (同じ理由で、キャンバスに描画する前にすべての画像を最初にプリロードする必要があります)

あなたの助けをどうもありがとう:)

ファローアップ

回答ありがとうございます。したがって、html5 では可能ですが、まだ普遍的にサポートされていないようです。

4

2 に答える 2

17

HTML4 ではこれは不可能ですが、HTML5 ではW3 File APIを使用してローカル ファイルにアクセスできるはずです。ただし、さまざまなブラウザーでいつ (どのように) サポートされるかはわかりません。私のローカル Firefox 14.0.1 では、次のコードが機能し、選択したファイルのバイナリ データが生成されます。

var reader = new FileReader()
reader.readAsDataURL(document.getElementById('userImage').files[0])
alert(reader.result)

次のページでは、ローカル イメージをキャンバスに描画します。

<html>
  <body>
    <script type="text/javascript">
      function doIt() {
        var reader = new FileReader();
        reader.onload = (function(e) {
            var img = new Image();
            img.src = e.target.result;
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            ctx.drawImage(img,10,10);
          }
        );
        reader.readAsDataURL(document.getElementById('userImage').files[0]);
      }
    </script>

    <input type="file" id="userImage" />
    <button onclick="doIt()">Render Image</button><br/>
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/>
  </body>
</html>

たぶん、2を読むことを検討する必要があります。

于 2012-08-24T10:29:35.067 に答える
-3

1) クライアント側のスクリプトはブラウザのサンドボックスで実行されるため、画像を開いたり変更したりすることはできません。スクリプトがファイルシステムまたはユーザーファイルにアクセスできる場合、セキュリティの問題になります

2）いいえ、ブラウザはファイル自体をブロックごとにリモートサーバーに送信します

3) 項目 1 を参照してください :)

于 2012-08-24T10:15:19.743 に答える