js/jcrop/jquery.Jcrop.go.js

   1                 $(function(){
   2                         var x = ($('#avatar_crop_x').val()) ? $('#avatar_crop_x').val() : 0;
   3                         var y = ($('#avatar_crop_y').val()) ? $('#avatar_crop_y').val() : 0;
   4                         var w = ($('#avatar_crop_w').val()) ? $('#avatar_crop_w').val() : $("#avatar_original img").attr("width");
   5                         var h = ($('#avatar_crop_h').val()) ? $('#avatar_crop_h').val() : $("#avatar_original img").attr("height");
   6
   7                         jQuery("#avatar_original img").Jcrop({
   8                                 onChange: showPreview,
   9                         setSelect: [ x, y, w, h ],
  10                                 onSelect: updateCoords,
  11                                 aspectRatio: 1,
  12                                 boxWidth: 480,
  13                                 boxHeight: 480,
  14                                 bgColor: '#000',
  15                                 bgOpacity: .4
  16                         });
  17                 });
  18
  19                 function showPreview(coords) {
  20                         var rx = 96 / coords.w;
  21                         var ry = 96 / coords.h;
  22
  23                         var img_width = $("#avatar_original img").attr("width");
  24                         var img_height = $("#avatar_original img").attr("height");
  25
  26                         $('#avatar_preview img').css({
  27                                 width: Math.round(rx *img_width) + 'px',
  28                                 height: Math.round(ry * img_height) + 'px',
  29                                 marginLeft: '-' + Math.round(rx * coords.x) + 'px',
  30                                 marginTop: '-' + Math.round(ry * coords.y) + 'px'
  31                         });
  32                 };
  33
  34                 function updateCoords(c) {
  35                         $('#avatar_crop_x').val(c.x);
  36                         $('#avatar_crop_y').val(c.y);
  37                         $('#avatar_crop_w').val(c.w);
  38                         $('#avatar_crop_h').val(c.h);
  39                 };