使用jQuery UI Slider调整图像大小

Question

我正在使用jQuery UI滑块按比例调整图像大小，首先上传图像然后传递给调整大小的部分，它到目前为止工作得很好。这里唯一的问题是我立即定位范围滑块图像变小原始宽度!!这是我的代码：

//resize
var orginalWidth = $("#image").width();

$("#infoSlider").text(orginalWidth + ', 100%');

$("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
        var fraction = (1 + ui.value / 100),
            newWidth = orginalWidth * fraction;

        $("#infoSlider").text('width :' + newWidth + ', Proportion :' + Math.floor(fraction * 100) + '%');

        $("#image").width(newWidth);
    }
});

// UPloded
$(function () {
            $(":file").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });

        function imageIsLoaded(e) {
            $("#slider").removeAttr("style")
            $('#image').attr('src', e.target.result);
        };

<div id="slider"></div>
<span id="infoSlider"></span>

<div class="target">
    <img id="image" src="#" alt="your image" />
    <input type='file' />
</div>   

我可以解决这个问题！非常感谢 以下是此问题的演示：DEMO 问题：

Answer 1

加载后，您需要在变量中获取加载后的图像大小。

添加：

orginalWidth = $("#image").width();

致函：

function imageIsLoaded(e) {
    $("#slider").removeAttr("style")
    $('#image').attr('src', e.target.result);
    orginalWidth = $("#image").width(); // store the loaded image size
};

检查分数，宽度和比例的值。

当您将滑块更改为缩小时，它的外观如下：

当您更改滑块时，请注意图像已恢复原始大小：

当您增加幻灯片时，请注意值会增加，图像也会增加：

---

编辑：

在选择图像之前以及选择新图像时使用滑块时会出现问题。这是因为img标签本身的宽度已更改，无论您选择的图片有多大，它都会适合img标签的新维度。

解决方案：

使用动态添加的img标记。每次选择新图像时，都会删除早期的img元素并添加新的img元素。将新标记的src分配给所选图像。这样可以有效地在每次选择时重置图像。

演示2：http://jsfiddle.net/XQSLk/5/

function imageIsLoaded(e) {
    var $newImg = $("<img>");                        // create a new img element
    $("#slider").removeAttr("style")
    $("#slider").slider('value', 0);                 // reset the slider
    $("#image").remove();                            // remove the existing img element
    $newImg.attr("id", "image");                     // add id to the new element
    $newImg.attr('src', e.target.result);            // assign src to new element
    $("#tgt").append($newImg);                       // add new element to DOM inside target div
    originalWidth = $("#image").width();             // now get the new width
    $("#infoSlider").text(originalWidth + ', 100%'); // reset the slider text
};

希望有所帮助。