5

画像のトリミングには Jquery Jcrop を使用します。現在、画像のサイズを変更するためのスライダーを実装しています。トリミングとサイズ変更を同じページで実行したい。

私はこのようにします：

$(document).ready(function() {


    var img = $('#cropbox')[0]; // Get my img elem
    var orgwidth, orgheight;
    $("<img/>") // Make in memory copy of image to avoid css issues
        .attr("src", $(img).attr("src"))
        .load(function() {
            orgwidth = this.width;   // Note: $(this).width() will not
            orgheight = this.height; // work for in memory images.
        });

    $('#cropbox').Jcrop({
        onSelect: updateCoords
    });

    $("#imageslider").slider({
        value: 100,
        max: 100,
        min: 1,
        slide: function(event, ui) {
            //$('ul#grid li').css('font-size',ui.value+"px");
            resizeImage(orgwidth, orgheight);
        }
    });

});

そして、私の単純な resizeImage 関数:

function resizeImage(orgwidth, orgheight) {
    var value = $('#imageslider').slider('option', 'value');
    var width = orgwidth * (value / 100);
    var height = orgheight * (value / 100);
    $('#cropbox').width(width);
    $('#cropbox').height(height);
    $('#tester').val("org: "+orgwidth+" now: "+width);
}

問題は、Jcrop をオンにするとすぐに画像のサイズを変更できないことです。これらの機能を同時に使用するにはどうすればよいですか?

4

5 に答える 5

6

サイズ変更中にjCropを破壊し、サイズ変更後に元に戻しました。とにかくありがとう。コード：

        function resizeImage(orgwidth, orgheight) {
        jcrop_api.destroy();

        var value = $('#imageslider').slider('option', 'value');
        var width = orgwidth * (value / 100);
        var height = orgheight * (value / 100);
        $('#cropbox').width(width);
        $('#cropbox').height(height);
        $('#rw').val(width);
        $('#rh').val(height);

        initJcrop();

    }
于 2011-06-13T09:31:30.933 に答える
3

jCrop が適用されたスライダーで画像のサイズを変更するという、同じタスクを達成する必要がありました。画像だけでなく、jCrop が作成した要素もサイズ変更する必要があります。jCrop プラグインにパッチを適用することになりました。これが最新の jCrop-0.9.10 のパッチです。

jCrop にパッチを適用します。パッチの適用方法がわからない場合は、resizeImage 関数を jCrop の 1578 行目に配置してください (もちろん、元のバージョンです)。

--- /home/dr0bz/Desktop/jquery.Jcrop.js
+++ /home/dr0bz/workspace/profile_tuning/js/lib/jquery.Jcrop.js
@@ -1573,6 +1573,15 @@
       ui: {
         holder: $div,
         selection: $sel
+      },
+      
+      resizeImage: function(width, height) {
+        boundx = width;
+        boundy = height;
+        $([$img2, $img, $div, $trk]).each(function(index, element)
+        {
+          element.width(width).height(height);
+        });
       }
     };

jCrop API を取得します。

var jCropApi;
$('#photo').Jcrop({}, function()
{
  jCropApi = this;
});

新しい高さと幅を計算します。スライダーでそれを行っている場合は、スライダーが画像の新しい幅を返すと言って、画像の縦横比で新しい高さを計算します。

var aspectRatio = width / height;
// newWidth returned by slider
var newHeight = Math.round(width / aspectRatio);
jCropApi.resizeImage(newWidth, newHeight);

他にも気をつけたいポイントがあります。サイズを変更するたびに、トリミング領域がまだ画像のビューポートにあるように見えるはずです。必要に応じて、完全なソースを投稿できます。画像のサイズを変更するための jCrop + jquery ui スライダー。

よろしく

于 2012-10-16T11:54:47.327 に答える
1

また、Jcrop の setImage 関数を使用することもできます。スライダーが変更されたら、Jcrop API で setImage を呼び出し、新しい幅と高さの値を次のように設定します。

var jcrop_api;

$('#cropbox').Jcrop({
    onSelect: updateCoords
}, function() {
    jcrop_api = this;
});

$("#imageslider").slider({
    value: 100,
    max: 100,
    min: 1,
    slide: function(event, ui) {
        var value = $('#imageslider').slider('option', 'value');
        var width = orgwidth * (value / 100);
        var height = orgheight * (value / 100);
        jcrop_api.setImage($(img).attr("src"), function() {
            this.setOptions({
                boxWidth: width,
                boxHeight: height
            });
        });
        $('#tester').val("org: "+orgwidth+" now: "+width);
    }
});

この手法について確信が持てないのは、setImage 関数を呼び出すたびに jcrop が新しい Image オブジェクトを作成するため、これが最適なソリューションであるかどうかです。

于 2013-10-22T21:23:43.827 に答える
0

Hermann Bier の回答の拡張として、jquery アニメーションを追加しました。アニメーション化すると、サイズ変更の見栄えが良くなります:)

Jcrop バージョンで実装: jquery.Jcrop.js v0.9.12

コードを見つけます。

ui: {
    holder: $div,
    selection: $sel
  }

jquery.Jcrop.js の 1573 行付近を次のように置き換えます。

ui: {
    holder: $div,
    selection: $sel
  },
  resizeImage: function(width, height) {
    animationsTid = 500;
    boundx = width;
    boundy = height;

    $($img2).animate({
        width: width, 
        height: height,
    }, { duration: animationsTid, queue: false });

    $($img).animate({
        width: width, 
        height: height,
    }, { duration: animationsTid, queue: false });

    $($div).animate({
        width: width, 
        height: height,
    }, { duration: animationsTid, queue: false });

    $($trk).animate({
        width: width, 
        height: height,
    }, { duration: animationsTid, queue: false });

    /*
    //Old way of resizing, but without animation
    $([$img2, $img, $div, $trk]).each(function(index, element){
      element.width(width).height(height);
    });
    */
  }

関数を呼び出すと、サイズ変更がアニメーション化されます。/* */ の間のコードは自由に削除してください - 参照用に残しておきました

ハッピーコーディング:)

于 2013-12-16T21:53:33.100 に答える
0

サイズ変更が比例する必要がある場合は、スライダーは必要ないと思います（jCropと互換性がないように見えるため）。jCropを使用し、onChangeイベントで比例性を確保できます (つまり、変更されたresizeImage関数を実装します)。
そう思います。

于 2011-06-04T10:29:19.677 に答える