web-dev-qa-db-ja.com

アップロードする前に画像の寸法を確認することはできますか？

画像をサーバーにアップロードするためのアップロードコントロールがありますが、アップロードする前に、画像のサイズが正しいかどうかを確認したいだけです。 javascriptでできることはクライアント側にありますか？

javascriptjqueryfile-uploadclient-side
54
Sabby62

フォームを送信する前にそれらを確認できます。

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

$("form").submit( function( e ) {
    var form = this;
    e.preventDefault(); //Stop the submit for now
                                //Replace with your selector to find the file input in your form
    var fileInput = $(this).find("input[type=file]")[0],
        file = fileInput.files && fileInput.files[0];

    if( file ) {
        var img = new Image();

        img.src = window.URL.createObjectURL( file );

        img.onload = function() {
            var width = img.naturalWidth,
                height = img.naturalHeight;

            window.URL.revokeObjectURL( img.src );

            if( width == 400 && height == 300 ) {
                form.submit();
            }
            else {
                //fail
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        form.submit();
    }

});

これは最新のブラウザでのみ機能するため、サーバー側で寸法を確認する必要があります。また、クライアントを信頼することもできないため、とにかくサーバー側で確認する必要があるもう1つの理由です。

62
Esailija

はい、HTML5 APIはこれをサポートしています。

http://www.w3.org/TR/FileAPI/

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {

    var image, file;

    if ((file = this.files[0])) {

        image = new Image();

        image.onload = function() {

            alert("The image width is " +this.width + " and image height is " + this.height);
        };

        image.src = _URL.createObjectURL(file);


    }

});​

[〜＃〜] demo [〜＃〜] （クロムでテスト済み）

46
Gurpreet Singh

物事を簡単にするには、 fabric.js 、 processing.js 、および MarvinJ のようなJavaScript画像処理フレームワークを使用します。

MarvinJ の場合、単にクライアント側で画像をロードし、メソッドgetWidth（）およびgetHeight（）で画像の寸法を確認します。ディメンションがあると、ファイルの送信を許可したり、互換性のないディメンションについてユーザーに通知したりできます。

例：

var image = new MarvinImage();
image.load("https://i.imgur.com/oOZmCas.jpg", imageLoaded);

function imageLoaded(){
  document.getElementById("result").innerHTML += image.getWidth()+","+image.getHeight();
}
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<div id="result"></div>
1
Gabriel Ambrósio Archanjo

少し遅れる可能性がありますが、ここに約束を使用して受け入れられた答えの最新のES6バージョンがあります

const getUploadedFileDimensions: file => new Promise((resolve, reject) => {
    try {
        let img = new Image()

        img.onload = () => {
            const width  = img.naturalWidth,
                  height = img.naturalHeight

            window.URL.revokeObjectURL(img.src)

            return resolve({width, height})
        }

        img.src = window.URL.createObjectURL(file)
    } catch (exception) {
        return reject(exception)
    }
})

あなたはこのように呼ぶでしょう

getUploadedFileDimensions(file).then(({width, height}) => {
    console.log(width, height)
})
1
techouse

Svgファイルを処理する必要がなく、 最新のブラウザ に制限できる場合は、 createImageBitmap 関数を使用してPromiseベースのファイルを作成できます。ライナー：

if(typeof createImageBitmap !== "function") {
  console.error("Your browser doesn't support this method");
  // fallback to URL.createObjectURL + <img>
}

inp.oninput = e => {
  createImageBitmap(inp.files[0])
    .then((bmp) => console.log(bmp.width, bmp.height))
    .catch(console.error);
}
<input type="file" id="inp" accept="image/*">
1
Kaiido