Question

我正在努力根据他们的网站示例调用ImageAreaSelect并获取原始图像大小参数以正确缩放裁剪选择。可用的裁剪区域是容器的整个宽度（I＆＃39;更确切地说是图像宽度），并且我在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()调用只返回容器宽度。 .naturalWidth之后的getElementById次调用未定义，除非我有一个定义良好的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等。再一次。

如何在文件打开和调用imageareaselect时获取原始图像大小

1 个答案: