Question

当用户开始在文件字段中裁剪新上传的图像时，我希望根据更改的图像尺寸显示图像大小。当用户从文件中选择图像时，我正在显示图像预览，此处用户可以裁剪图像。当用户开始裁剪时，我想根据裁剪尺寸的新尺寸显示估计的图像尺寸。我知道文件的原始尺寸和尺寸以及作物尺寸的新尺寸。有没有办法让我可以根据这些信息计算尺寸。这里有一些关于场景的代码，以便更清楚。 HTML代码得到（ 'item_picture'） - ＆GT;的getValue（）; if（is_array（$ return））{ $ return =（$ this-＆gt; picture-＆gt; item_picture）？ $ this-＆gt; picture-＆gt; item_picture：''; } ？＆GT; 图片 “data-provide =”fileupload“＆gt;

                <?php if ($return != '') { ?>
                    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 400px; max-height: 400px; line-height: 20px;">
                        <a data-gallery="" class="gallery-item" href="<?php echo $this->webUrl('/uploads/items/' . $return . '?' . time()); ?>"><img src="<?php echo $this->webUrl('/uploads/items/' . $return); ?>" style="max-height:350px;" /></a>
                    </div>
                <?php } else { ?>
                    <div style="width: 200px; height: 150px;" class="fileupload-new thumbnail">
                        <img alt="" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image">
                    </div>
                    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 400px; max-height: 400px; line-height: 20px;">
                    </div>
                <?php } ?>
                <div>
                    <span class="btn btn-file">
                        <span class="fileupload-new">Select image</span>
                        <span class="fileupload-exists">Change</span>
                        <?php echo $this->formElement($form->get('item_picture')) ?>
                    </span>
                    <a class="btn hide" id="startCrop">Crop</a>
                    <a href="javascript:void(0)" class="btn fileupload-exists" data-dismiss="fileupload" >Remove</a>
                    <code class="fileupload-exists">Size:</code> <span class="fileupload-exists" id="file_size"></span>
                    <!-- updated size would be updated here in a label -->
                    <p id="image1-dim" class="label label-success" style="display:none;">

                    </p>
                </div>
            </div>
            <code>Max allowed size: </code> 1024KB <br>
            <code>Allowed Cropping Area</code>Allowed Cropping area is proportion of 600x400px<br />
            <code>NOTE! </code>
            Attached image thumbnail is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 10 only 
            <br>
        </div>
        <div class="img-container" class="input">
            <input type="hidden" class="x" name="logo_x" id="x" />
            <input type="hidden" class="y" name="logo_y" id="y"/>
            <input type="hidden" class="w" name="logo_w" id="w"/>
            <input type="hidden" class="h" name="logo_h" id="h"/>
        </div>
    </div>

在jQuery上开始裁剪此函数触发 $（document）.on（'click'，'＃startCrop'，function（e）{

    var image = $('.cropbox');

    var originalWidth = image[0].naturalWidth;
    var originalHeight = image[0].naturalHeight;
    $('.cropbox').imgAreaSelect({
        handles: true,
        fadeSpeed: 200,
        onSelectChange: updateCoords,
        imageHeight: originalHeight,
        imageWidth: originalWidth,
        aspectRatio: '3:2',
        maxHeight: 400,
        maxWidth: 600,
        parent: '#media-panel'
    });
    $("#image1-dim").html('width: 0, height: 0');
    $("#image1-dim").show();

});
function updateCoords(img, selection)
{
    if (!selection.width || !selection.height)
        return;
    var size = $('input[name="item_picture"]')[0].files[0].size;
    var image = $('.cropbox');
    var originalWidth = image[0].naturalWidth;
    var originalHeight = image[0].naturalHeight;
    //        alert(originalHeight);
    $('#x').val(selection.x1);
    $('#y').val(selection.y1);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
    $("#image1-dim").html('width: ' + selection.width + ', height: ' + selection.height);

    // here i want to write some logic to calculate estimated size using available info. privious dimensions and size, new crop dimensions 
}

请记住，图片处于预览状态时，只会在其上绘制裁剪尺寸，尚未处理。

我可以从给定的尺寸计算图像大小。我想显示尺寸变化的估计尺寸

0 个答案: