下载调整后的图像，并设置新的宽度和高度

基本上，我正在尝试调整图像的大小并下载它的新宽度和高度，但它只下载它的原始版本:

jQuery(document).ready(function() {
    jQuery(function () {
            jQuery(":file").change(function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                    orginalWidth = $("#image").width();
                    orginalheight = $("#image").height();
                    // alert(orginalheight);
                    var images = jQuery('.thumb-wrapper img'); //caches the query when dom is ready
                    // var CELL_WIDTH = 150;
                    var ASPECT = 1.5;
                    jQuery( "#slider" ).slider({
                        step: 5,
                        min: 70,
                        max: 200,
                        value: 100,
                        slide: function(event, ui) {
                            var size = (orginalWidth * ui.value /10) + "px";
                            // alert(size);
                            images.stop(true).animate({width: size, height: size / ASPECT}, 250);
                        }
                    });
                }
            });
        });
        function imageIsLoaded(e) {
            jQuery("#download").removeAttr("style");
            jQuery("#file").css("display", "none");
            jQuery('#image').attr('src', e.target.result);
            jQuery('#download').attr('href', e.target.result);
        };
});

HTML:

<div id="slider"></div>
<div class="file-list">
 <div class="file-cell">
    <div class="thumb-wrapper">
        <input id="file" type='file' style=""/>
        <img id="image" src="#" alt="your image" />
        <a id="download" href="#" download="filename.jpg" style="display:none;">Download</a>
    </div>
  </div>
</div>

这里有一个Jsfiddle demo
有什么解决办法吗?感谢!