JCrop - posting a cropped image

JCrop - posting a cropped image

Hello,

This is the first time i'm using the JCrop plug-in and i have a couple of questions. I am trying to create a pop-up where you can upload an image and crop it. The full image gets posted to a folder where the real image stays so you can edit the crop after the uploading. (this works)

The pop-up has a save button which should submit the cropped image to another folder where the cropped images are saved. How do i submit an cropped image to a folder?
I have 4 rows in my database which are to store the coordinates and height/width.

Those are:
  1. y_pos
  2. x_pos
  3. width
  4. height

I'm using this upload script:
  2. <?php
  3. function __autoload($class_name)
  4. {
  5. include_once('./../includes/class_'. strtolower($class_name) . '.php');
  6. }

  8. $path = Settings::$include_path."/uploaded/avatar_realsize/";
  9. $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
  10. if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
  11. {
  12. $name = $_FILES['photoimg']['name'];
  13. $size = $_FILES['photoimg']['size'];
  14. $user_id = $_POST['user_id'];

  16. if(strlen($name))
  17. {
  18. list($txt, $ext) = explode(".", $name);
  19. if(in_array($ext,$valid_formats))
  20. {
  21. if($size>(100*100))
  22. {
  23. $actual_image_name = $user_id.".".$ext;
  24. $tmp = $_FILES['photoimg']['tmp_name'];
  25. if(move_uploaded_file($tmp, $path.$actual_image_name))
  26. {
  27. echo Settings::$url."/uploaded/". $actual_image_name;
  28. }
  29. }
  30. }
  31. }
  32. exit;
  33. }
  34. ?>

This is the crop:
  2. jQuery(function($){
  3. $('#photoimg').live('change', function()
  4. {
  5. $("#imageform").ajaxForm({
  6. success: function(responseText)
  7. {
  8. jcrop_api.setImage(responseText);
  9. }
  10. }).submit();
  11. });

  13. var coord = $('#profielfotoform').attr('rel');

  15. var existwidth = 0;
  16. var existheight = 0;

  18. if(existwidth == '0' && existheight == '0')
  19. {
  20. var width = 250;
  21. var height = 250;
  22. } else {
  23. var width = existwidth;
  24. var height = existheight;
  25. }

  27. // Create variables (in this scope) to hold the API and image size
  28. var boundx,
  29. boundy,

  31. // Grab some information about the preview pane
  32. $preview = $('#preview-pane'),
  33. $pcnt = $('#preview-pane #preview-container'),
  34. $pimg = $('#preview-pane #preview-container img'),

  36. xsize = $pcnt.width(),
  37. ysize = $pcnt.height();

  39. console.log('init',[xsize,ysize]);
  40. jcrop = $('#target').Jcrop({
  41. setSelect: [width, height, 0, 0],
  42. minSize: [250, 250],
  43. onChange: updatePreview,
  44. onSelect: updatePreview,
  45. aspectRatio: xsize / ysize
  46. },function(){
  47. // Use the API to get the real image size
  48. var bounds = this.getBounds();
  49. boundx = bounds[0];
  50. boundy = bounds[1];
  51. // Store the API in the jcrop_api variable
  52. jcrop_api = this;
  53. });

  55. function updatePreview(c)
  56. {
  57. if (parseInt(c.w) > 0)
  58. {
  59. var rx = xsize / c.w;
  60. var ry = ysize / c.h;

  62. $pimg.css({
  63. width: Math.round(rx * boundx) + 'px',
  64. height: Math.round(ry * boundy) + 'px',
  65. marginLeft: '-' + Math.round(rx * c.x) + 'px',
  66. marginTop: '-' + Math.round(ry * c.y) + 'px'
  67. });
  68. }
  69. };
  70. });
(ajaxForm is a plug-in i'm using.)

And this is the form:
  2. if(file_exists(Settings::$include_path.'/uploaded/avatar_realsize/'.$row['user_id'].'.png')) {             $realavatar = Settings::$url.'/uploaded/avatar_realsize/'.$row['user_id'].'.png'; 
  3.         }
  4.         <div id="profielblurreffect"></div>
  5. <div id="profielfotoform">
  6. <div class="crop-field-info">
  7. Dit is het veld waar u de afbeelding kunt bijsnijden.<br />
  8. Door op dit veld te klikken zal het bijsnijden worden geactiveerd.
  9. </div>
  10. <div class="preview-pane-info">
  11. Dit is een voorbeeld van de bijgesneden afbeelding met de afmetingen van<br />250 pixels bij 250 pixels.
  12. </div>
  13. <div class="preview-pane-info2">
  14. Dit is een voorbeeld van de bijgesneden afbeelding met de afmetingen van<br />100 pixels bij 100 pixels.<br />
  15. Dit is de afmeting die word gebruikt voor de profiel foto.
  16. </div>
  17. <div class="preview-pane-info3">
  18. Dit is een voorbeeld van de bijgesneden afbeelding met de afmetingen van<br />50 pixels bij 50 pixels.
  19. </div>
  20. <div class="upload-info">
  21. Hier kunt u een foto uploaden.
  22. </div>
  23. <span class="jcropformtitel">Profielfoto wijzigen '.$adminedit.'</span><img class="help-icon" src="'.Settings::$url.'/images/help-icon.png">
  25. <div id="crop-size">
  26. <img src="'.$realavatar.'" id="target" alt="Snijvlak" />
  27. </div>

  29. <div id="preview-pane">
  30. <div id="preview-container">
  31. <img src="'.$realavatar.'" class="jcrop-preview" alt="Preview 250x250" />
  32. </div>
  33. </div>

  35. <form id="imageform" method="post" enctype="multipart/form-data" action="'.Settings::$url.'/js/uploadimage.php">
  36. <input type="hidden" value="'.$user_id.'" name="user_id" />
  37. Upload foto <input type="file" name="photoimg" id="photoimg" rel="'.$user_id.'" />
  38. </form>
  39. <div id="profielfotoformbuttons">
  40. <button id="canceleditprofielfoto">Annuleren</button>
  41. <button id="saveeditprofielfoto">Opslaan</button>
  42. </div>
  43. </div>

    • Topic Participants

    • 57417