2

私の最初の大規模なプロジェクトの 1 つなので、ご容赦ください。画像のサイズを変更してbase64に変換するのに役立つスクリプトがあります。これはそれがどのように始まるかです：

var createImage = function (src) {
    var deferred = $.Deferred();
    var img = new Image();

    img.onload = function() {
        deferred.resolve(img);
    };
    img.src = src;
    return deferred.promise();
};

私の質問は、アップロードフォームからスクリプトに画像ソースを取得することですか?

Filereader APIを使用して関数を（他のソースからの助けを借りて）つなぎ合わせようとしました：

var createImageURL = function () {
    var fileinput = document.getElementById('fileinput');
    file = fileinput.files[0];
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function (event) {
      var blob = new Blob([event.target.result]); 
      window.URL = window.URL || window.webkitURL;

      var blobURL = window.URL.createObjectURL(blob);

    }
    return blobURL;
};

ただし、これはコンソールで GET エラーを返します。

4

1 に答える 1

6

Blobを経由するのではなく、<input>のFileをObjectURLに直接変換して、コードの同期を維持し、必要なコード行数を減らすことで、多くの問題を回避できます。

function inputToURL(inputElement) {
    var file = inputElement.files[0];
    return window.URL.createObjectURL(file);
}

var url = inputToURL(document.getElementById('fileinput'));
createImage(url);

ファイルは仕様ごとのブロブ であるため、これは機能します（レイ・ニコラスが指摘したように）

Fileは既にBlobから継承されているため、お勧めしませんが、それらの間で変換することは非常にまれですが、不可能ではありません。これを含めているのは、問題の解決策としてではなく、将来必要になった場合にFileReaderコードを構造化する方法を確認できるようにするためです。<input type="file" />の最初のファイルをBlobに変換するには、次のようにします。

function fileToBlob(inputElement, callback) {
    var fileReader = new FileReader();
    fileReader.onload = function () {
        callback(new Blob([this.result]));
    }
    fileReader.readAsArrayBuffer(inputElement.files[0]);
}

Wherecallbackは、最初のパラメーターとしてBlobを受け取ります。readAsArrayBufferを使用するcallbackようになったので、非同期環境で動作するようにこれを作成する必要があったことを思い出してください。

于 2013-08-31T13:19:09.940 に答える