73

Webアプリケーションで画像のサムネイルを生成する必要があります。Html 5FileAPIを使用してサムネイルを生成します。

以下のURLの例を使用してサムネイルを生成しました。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

サムネイルを正常に生成できました。私が抱えている問題は、静的なサイズを使用することによってのみサムネイルを生成できることです。選択したファイルからファイルのサイズを取得して、Imageオブジェクトを作成する方法はありますか？

4

4 に答える 4

147

はい、ファイルをデータ URL として読み取り、そのデータ URL をhttp://jsfiddle.net/pimvdb/eD2Ez/2/srcに渡しImageます。

var fr = new FileReader;

fr.onload = function() { // file is loaded
    var img = new Image;

    img.onload = function() {
        alert(img.width); // image is loaded; sizes are available
    };

    img.src = fr.result; // is the data URL because called with readAsDataURL
};

fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating
于 2011-09-18T08:19:03.890 に答える
5

私は自分のプロジェクトで一般的な目的のために pimvdb の回答を関数にラップしました:

function checkImageSize(image, minW, minH, maxW, maxH, cbOK, cbKO){
    //check whether browser fully supports all File API
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var fr = new FileReader;
        fr.onload = function() { // file is loaded
            var img = new Image;
            img.onload = function() { // image is loaded; sizes are available
                if(img.width < minW || img.height < minH || img.width > maxW || img.height > maxH){  
                    cbKO();
                }else{
                    cbOK();
                }
            };
            img.src = fr.result; // is the data URL because called with readAsDataURL
        };
        fr.readAsDataURL(image.files[0]);
    }else{
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
    }
}
于 2014-12-15T17:56:01.187 に答える