Question

基本上，我试图调整图片的大小，然后用新的宽度和高度下载它，但它只下载它的原始版本：

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
对此有何解决方案？非常感谢！

Answer 1

您现在正在做的是让浏览器在视口中调整图像大小，而不会更改原始图像。你需要做的是制作一个脚本来调整图像服务器端的大小。您可以使用jQuery将图像发布到服务器并重新获取已调整大小的图像。

下载调整大小图像的新宽度和高度

1 个答案: