8

ファイル入力要素を使用して、Android ブラウザーから画像をキャプチャしています。ここで、blob データを ImageData に変換して、 を使用してキャンバスにレンダリングできるようにしますputImageData。

<!DOCTYPE html>
<html>

<body>
    <input type="file" id="file" />
</body>

<script>
    function handleFileSelect(evt) {

        var files = evt.target.files; // FileList object

        var selFile = files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
        var blobData = e.target.result;    
            console.log(e.target.result);
        };

        reader.onerror = function(e) {
            console.log(e);
        };
        reader.readAsArrayBuffer(selFile);
    }


    document.getElementById('file').addEventListener('change',handleFileSelect, false);
</script>

</html>

上記のコードで、blobData を ImageData に変換するにはどうすればよいですか? 前もって感謝します。

4

1 に答える 1

8

使用するputImageData()場合は、キャンバス ビットマップに変換するビットマップを取得するために、自分でファイルを手動でデコードおよび解凍する必要があります。

幸いなことに、その必要はありません -

入力要素から取得した File オブジェクトは、blob オブジェクトとして直接使用できます。したがって、画像ソースとして使用できるように、一時的なオブジェクト URL を作成するだけです。

Image オブジェクトを作成し、オブジェクトの URL をソースとして設定します。ロードされたら、キャンバスに画像を描画するだけです。後で使用するために画像を保持したい場合は、代わりにハンドラーの外で定義してください。URL を取り消してメモリを解放することが重要です。

一部のブラウザーでは、URL オブジェクトのプレフィックスが必要になる場合があることに注意してください。これを行うと、それをカバーできます。

window.URL = window.URL || window.webkitURL;

サンプルコード

document.querySelector("input").onchange = function(e) {

  var file = e.target.files[0],                  // reference first file BLOB
      url = URL.createObjectURL(file),           // create an Object URL
      img = new Image();                         // create a temp. image object
    
    img.onload = function() {                    // handle async image loading
      URL.revokeObjectURL(this.src);             // free memory held by Object URL
      c.getContext("2d").drawImage(this, 0, 0);  // draw image onto canvas (lazy method™)
    };

    img.src = url;                               // start convertion file to image
};
#c {border: 1px solid #000}
Chose an image: <input type=file><br>
<canvas id=c width=600 height=400></canvas>

取得するにImageDataは、次のように呼び出します。

var idata = context.getImageData(0, 0, width, height);

イメージがキャンバスに描画された後。

于 2016-04-04T04:43:35.533 に答える