Я использую ползунок пользовательского интерфейса jQuery для пропорционального изменения размера изображения, сначала загружаю изображение, затем вы переходите к части изменения размера, и пока все работает отлично. Единственная проблема здесь в том, что как только я устанавливаю ползунок диапазона, изображение становится меньше его первоначальной ширины!! Вот мой код :

 //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 amp;amp; 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>   
  

Как я могу это исправить, пожалуйста! Очень признателен
И вот демонстрация к этой проблеме: ДЕМОНСТРАЦИЯ
Проблема :

Вам нужно получить размер загруженного изображения в переменной после его загрузки.

Добавьте это:

 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
};
  

Надеюсь, это поможет.