文件打开和调用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?
        };
    });
});

我一直在尝试很多建议的解决方案，但无法让任何东西正常工作。 .width() js 函数中的调用只返回容器宽度。在getElementById 之后的.naturalWidth 调用是未定义的，除非我有一个明确定义的img ID 和src="some file"。我不知道如何获取或定义在 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等。