0

コンピューター上のファイルからファイルを読み込んで、変数に保存しようとしています。私は現在試しています：

var fr = new FileReader;

fr.onload = function() {

    //variable to hold file
    var data = fr.result;

    var c=document.getElementById("cvs");
    var ctx=c.getContext("2d");
    ctx.drawImage(img,0,0,200,180);
};

fr.readAsDataURL("encryptedImage");

これは動作しません。これを行う必要があります。ファイルシステム上の暗号化されたイメージを復号化できますか。私はすでにセキュリティをオフにしているので、ファイルシステムをブラウザから読み取ることができます。

何か案は？

4

1 に答える 1

0

ここから、文字列を readAsArrayBuffer() に渡してローカル ファイルをロードしたいように見えますが、これは blob またはファイル オブジェクトを想定しています。このファイルは、ブラウザのファイル ダイアログからロードできます。手順は次のとおりです。ファイルを選択し、fileReader asArrayBuffer または asDataURL または asBinaryString を介してファイルをロードし、コードでデータを操作または使用します。

この例では、ローカル ファイルから画像を作成し、それをキャンバスに描画します (正しい MIME タイプ "image.*" の場合)。

適用するエンコード/デコードの種類がわかりません。ただし、データのカスタム操作には、ArrayBuffers と TypeArrays を使用することをお勧めします。

FileReader.readAsDataURL() の例: http://jsfiddle.net/uvmD7/

<body>
  <canvas id="cvs" width="200" height="200"></canvas>
  <input type="file" id="files" name="files[]" multiple />
</body>

そしてスクリプト：

document.getElementById('files').addEventListener('change', handleFileSelect, false);

var fr = new FileReader();

function handleFileSelect(evt) {
    var files = evt.target.files;
    fr.readAsDataURL(files[0]);
};

fr.onload = function(evt) {
    // do sth with it
    var data = evt.target.result; //fr.result 
    img = new Image();
    img.src = data; 
    //  draw after load
    img.onload = function() {
       var c=document.getElementById("cvs");
       var ctx=c.getContext("2d");
       ctx.drawImage(img,0,0,200,180);      
    };
};
于 2013-01-16T19:52:25.020 に答える