打開文件並調用imageareaselect時如何獲取原始圖像大小

Question

我正在努力按照他們的網站示例調用ImageAreaSelect，並獲取原始圖像尺寸參數以適當縮放作物選擇。 可用的裁剪區域是容器的整個寬度（我寧願是圖像寬度），並且我在css中使用max-width參數來限制加載的文件寬度小於容器的寬度。 有很多重新選擇選擇器的示例，但是如何獲得原始的寬度和高度？ 我成功保存了打開的文件名，以便以后在單獨的畫布上進行js像素操作，但是如果加載了超大圖像，則必須重新縮放選擇結果。

HTML：

<div class="container demo">
    <div style="float: left; width: 50%;">       
        <div class="frame" style="margin: 0 0.3em; width: 800px; height: 800px;">   
            <input type="file" id="file"/>
            <br />
            <div id="view"> Your image will load here</div>
        </div>
    </div>
</div>

CSS：

.imgContainer img { max-width: 600px;}

js：

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    // or do some conditional scaling here if image is large
    x_1 = selection.x1;   //I use these globals elsewhere for pixel calcs
    y_1 = selection.y1;
    S_wid = selection.width;
    S_hei = selection.height;
    L = Math.floor((S_wid * S_hei) / 4096);   //4-bit ave color density
}

$(function () {
    $('#view').imgAreaSelect({
        handles: true,
        fadeSpeed: 200,
        // imageHeight: originalHeight, //how to get these, or do elsewhere?
        // imageWidth: originalWidth,
        onSelectChange: preview
    });
});

$(window).load(function () {
    $('#file').change(function () {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(this.files[0]);
        console.log(this.files[0]);
        oFReader.onload = function (oFREvent) {
            $('#view').html('<img src="' + oFREvent.target.result + '">');
            fname = oFREvent.target.result;  //global, used later elsewhere
            // some way to get original image sizes here, or do elsewhere?
        };
    });
});

我一直在嘗試許多建議的解決方案，但無法使任何東西正常工作。 js函數中的.width()調用僅返回容器寬度。 除非有src="some file"明確定義的img ID，否則getElementById .naturalWidth調用是未定義的。 我不知道如何獲取或定義在jquery中以這種方式打開的文件的img ID。 希望這里缺少一些簡單的東西。 在此先感謝您的幫助。

Answer 1

如果我理解正確，則naturalWidth無法正常工作，因為從圖像中獲取該信息還為時過早。 您可以嘗試等待圖像加載完畢，然后再更新imgAreaSelect（我檢查了他們的文檔，他們有設置選項的方法），例如

以下代碼塊將從以下位置更改：

        $('#view').html('<img src="' + oFREvent.target.result + '">');
        fname = oFREvent.target.result;  //global, used later elsewhere
        // some way to get original image sizes here, or do elsewhere?

像這樣：

        var $img = jQuery('<img src="' + oFREvent.target.result + '">')
        .on('load', function(){

            // The image's data will be available now, 
            // so update imgAreaSelect with the new values.
            var iAS = $('#view').imgAreaSelect({ instance: true });
            iAS.setOptions({
                handles: true,
                fadeSpeed: 200,
                imageHeight: this.naturalHeight,
                imageWidth: this.naturalWidth,
                onSelectChange: preview
            });            
        });
        $('#view').html($img);
        fname = oFREvent.target.result;  //global, used later elsewhere

我不確定imgAreaSelect的setOptions方法如何工作，如果我們需要重新聲明原始選項或其他內容，那么您可能不需要再次設置handles ， fadeSpeed等。