Question

我一直试图围绕一个非常基本的Javascript / jQuery任务。

我使用以下HTML制作了一个基本的图片上传器：

div class="button one"></div>
    <div class="button two"></div>

    <div class="size ui-widget-content">
        <img src="" alt="" />
        <input type='file' name='userFile'>
    </div>

    <div class="button three"></div>

这是我到目前为止的代码，来自jQueryUI插件：

$( ".size" ).resizable( { 
    grid: [60, 24],
    ghost: true,
    aspectRatio: //ratio function here ,
    stop: function( event , ui) {
        var height = $(".size").css( "height" );
        var width = $(".size").css( "width" );
        $( ".size img" ).css( { width : width, height: height })

   }
});

$( ".size > input" ).change(function() {
    var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
    var height = $(".size").css( "height" );
    var width = $(".size").css( "width" );

    $( ".size img" ).css( { width : width, height: height } );  
    $( ".size img" ).attr("src" , filename);
    $( ".size img" ).attr("alt", filename );

    $( ".three" ).show();

    var fr = new FileReader;
    fr.onload = function() { // file is loaded
        var img = new Image;
        img.onload = function() {
            var maxWidth = 960;
            var maxHeight = maxWidth * (img.height/img.width);
            $( ".size, .size img" ).css( { width : img.width, height: img.height, "max-height": maxHeight , "max-width": maxWidth});
        };
    img.src = fr.result; // is the data URL because called with readAsDataURL
    };
    fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating
});

我想做的是以下内容：我正在尝试将硬盘上的图像上传到页面上。

到目前为止，非常好。

我使用了jQueryUI Resizable函数，以便我可以调整图像大小。这非常有效。

问题是，我不知道如何将正确的图像比率放入Resizable函数中。我需要这个功能，以便在我开始调整大小时，我的图像将保持原始的宽高比。

基本上，我需要从$（“。size＆gt; input”）。。change函数中获取值到$（“。size”）.resizable函数的aspectRatio属性

关于如何做到这一点的任何想法？

---------------------- EDIT ------------------------ -----------------------

我已经尝试过@FrédéricHamidi的解决方案，但它也无效。我已将代码编辑为：

$(".size").resizable("option", "start", function( event , ui){
        $(".size").resizable("option", "aspectRatio", 3 / 4);
});

但这也不起作用。 Firebug控制台说：

未捕获错误：在初始化之前无法调用resizable上的方法;试图调用方法'选项'

Answer 1

您可以在窗口小部件初始化之后，通过窗口小部件aspectRatio方法的setter形式在change处理程序中设置option()属性。

$(".size > input").change(function() {

    // Your current code...

    $(this).parent().resizable("option", "aspectRatio", yourComputedAspectRatio);
});

图像上传器的基本jQueryUI函数

1 个答案: