如何在文件打开和调用图像区域选择时获取原始图像大小

我正在努力根据他们的网站示例调用 ImageAreaSelect 并获取原始图像大小参数以正确缩放裁剪选择。 可用的裁剪区域是容器的整个宽度（我宁愿它是图像宽度），并且我在 css 中使用了最大宽度参数将加载的文件宽度限制为小于容器。 有很多重新缩放选择器的示例，但是如何获得原始宽度和高度？ 我正在成功保存打开的文件名，以便以后在单独的画布上进行 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()调用只返回容器宽度。 getElementById后面.naturalWidth调用是未定义的，除非我有一个定义良好的 img ID 和 src="some file" . 我不知道如何获取或定义在jquery中以这种方式打开的文件的img ID。 希望我在这里缺少一些简单的东西。 提前感谢任何帮助。