// 为图片容器设置固定宽高
$(".image-container").resizable({
  aspectRatio: true,
  handles: "se"
});

<div id="sortable-gallery">
  <img src="image1.jpg" class="ui-state-default">
  <img src="image2.jpg" class="ui-state-default">
  <img src="image3.jpg" class="ui-state-default">
</div>

<script>
$( "#sortable-gallery" ).sortable();
$( "#sortable-gallery" ).disableSelection();
</script>

$( "#dialog" ).dialog({
  autoOpen: false,
  modal: true,
  width: 600
});

$( "img.thumbnail" ).click(function() {
  var imgSrc = $(this).attr("src");
  $("#dialog").html('<img src="' + imgSrc + '" style="width:100%">');
  $("#dialog").dialog("open");
});

$(function() {
  var $cropper = $(".image-cropper");
  var $result = $("#cropped-result");
  var $img = $("#image-to-crop");
  
  $cropper.resizable({
    aspectRatio: 1,
    containment: "parent",
    handles: "n, e, s, w, ne, se, sw, nw"
  }).draggable({
    containment: "parent"
  });
  
  $("#crop-button").click(function() {
    var img = new Image();
    img.onload = function() {
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      
      var pos = $cropper.position();
      var width = $cropper.width();
      var height = $cropper.height();
      
      canvas.width = width;
      canvas.height = height;
      
      ctx.drawImage(
        img,
        pos.left, pos.top, width, height,
        0, 0, width, height
      );
      
      $result.html("").append(canvas);
    };
    img.src = $img.attr("src");
  });
});