2

アップデート：

テスト目的で、使用しました

<input type="text" onClick="doProcess(http://www.abc.com/chart.png)" />

それは機能しませんでした ( alertURL が渡されたかどうかをテストするために使用されました。アラート ボックスに URL が表示されましたが、デコードに失敗しました)。ある意味で、私は自分の質問の一部に答えました。javascriptを介して画像ファイルを読み取る方法に関するアイデアはありますか?tt

これが HTML 5 関連のコードであることがわかりました。また、ファイルのリストではなくURLを渡しているので、関数for()からループを削除する必要があると考えました。doProcess()

function doProcess(f)
{
    var o=[];

           var reader = new FileReader();
        reader.onload = (function(theFile) {
        return function(e) {
            gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);

            qrcode.decode(e.target.result);
        };
        })(f);
        reader.readAsDataURL(f); 

}

しかし、これもうまくいきません:(

元の投稿

QR 画像ファイルが付属する入力ファイルがあります。

<input type="file" onchange="doProcess(this.files)">

doProcess 関数

function doProcess(f)
{
    var o=[];

    for(var i =0;i<f.length;i++)
    {
        var reader = new FileReader();
        reader.onload = (function(theFile) {
        return function(e) {
            gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);

            qrcode.decode(e.target.result);
        };
        })(f[i]);
        reader.readAsDataURL(f[i]); 
    }
}

この機能は完璧に機能します。問題ありません。この関数の目的は、QR 画像をデコードすることです。まったくの興味と好奇心から、別のことを計画しています。画像ファイルを手動で参照する必要がなくなります。これにより、いくつかのクエリが表示されます。

  1. doProcess(f)ファイルの代わりに画像の URL を指定した場合、同じアクションを実行できますか? 現在f、パラメータはファイルです。fパラメータが URL (例: doProcess(http://www.abc.com/abc.jpg) ) の場合はどうなりますか? デコードプロセスを完了するために呼び出される他のサポート関数が内部にあることは認識していdoProcess()ますが、それらは渡されるデータのタイプに応じて機能すると想定していdoProcessます。

  2. fパラメーターがイメージ URL ではなくイメージ ファイル (ローカル コンピューターで参照して選択) である場合、データ型は何になりfますか? 配列か生のバイナリ形式になると思います。

私の意図は、プロセスを研究し、舞台裏で何が起こっているのかを正確に知ることです. 「参照」機能を使用して、QR 画像を正常にデコードしています。

要約すると、ファイルの代わりに保存されている画像の場所を引数として渡すとどうなりますか?

前もって感謝します。

4

1 に答える 1

2

完全なコードではなく、正確に何をしようとしているのかわからないため、ここにあるかどうかわからない問題がいくつかあります。これは、あなたがしていることに非常に近いものの実際の例です。キャンバスに画像をロードします（代わりにqrcodeのものを使用できます）

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var gCanvas;
      var gCtx;
      function load(){
        console.log("loaded");
        gCanvas = document.getElementById("mcanvas");
        if (gCanvas.getContext){
          gCtx = gCanvas.getContext("2d");
        } else console.log("no Canvas?");
      }
      function doProcess(f){
          var o=[];
          var reader = new FileReader();
          reader.onload = (function(theFile) {
              var img = new Image();
              img.src = theFile;
              img.onload = function(){
                gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
                gCtx.drawImage(img,0,0);
              }
              return;
          })(f);

          console.log(reader);
          reader.readAsDataURL(f);
      }
    </script>
  </head>

  <body onload="load()">
    <input type="text" onClick="doProcess('https://www.google.com.br/logos/2012/clara_schuman-2012-hp.jpg')" />
    <canvas id="mcanvas" height="500" width="500"></canvas>
  </body>
</html>

load 関数を忘れないでください。ボディのロード後に JavaScript を実行できるようにします。

于 2012-09-13T13:14:16.437 に答える