title: Drag and Drop Text and Saving to an image with jQuery and PHP
body: <p>I'm building a user generated image where they upload a picture, add flourishes and save it. I am able to get everything to work except I cannot get the X and Y axes to line up between the user placement and the image saving for the user added caption, which is a div overlay when the user enters it. </p>
  
  <p>HTML and jQuery code to line up the text (user inputs via text box, jQuery replaces the value):</p>
  
  <pre><code>    &lt;div id='images' style='height:480; width:640px; position:relative;'&gt;
                  &lt;div id='caption' style='height:35; width:40px; position: absolute; bottom:50; left:310; z-index:200; padding-botom:100px; color:white; font-size:30px; text-align:center; vertical-align:bottom; border:1px solid red;'&gt;&lt;/div&gt;
                  &lt;div id='border' style='height:480; width:640px; position: absolute; top:0; left:0; z-index:100;'&gt;&lt;img src='' id='borderimage'&gt;&lt;/div&gt;
                  &lt;div id='croppedimage' style='height:480; width:640px; position: absolute; top:0; left:0;'&gt;&lt;img src='&lt;?= $cropped ?&gt;'&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  &lt;script&gt;
  $(function() {
      $( "#caption" ).draggable({ containment: "parent", cursor:"move" });
    });
  $('.thumb').click(function(){
          var bordername=$(this).attr('id') + '.png';
          $('#border').css("background-image", "url(borders/" + bordername +")");  
          $('#borderchoice').val(bordername);
  
  });
  $('#captiontext').keyup(function(){
          var cap=$('#captiontext').val();
          $('#caption').text(cap);
          var caplen=$("#captiontext").val().length;
          var capwidth=caplen * 15;
          $("#caption").width(capwidth);
  });
  
  $('#submit').click(function(){
      console.log($('#caption').position());
          var top=$('#caption').position();
          var width=$('#caption').width();
          $('#x').val(top.top);
          $('#y').val(top.left);
          $('#width').val(width);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And the PHP that handles it on the following page:</p>
  
  <pre><code>imagecopyresampled($dest, $source, 0, 0, 0, 0, $imagewidth, $imageheight, $imagewidth, $imageheight);
  
  if (!empty($_POST['captiontext']))
  {
          $color = imagecolorallocate($dest, 255, 255, 255);
          $x=$_POST['x'];
          $y=$_POST['y'];
          $fontfile='arial';
          $text=urldecode($_POST['captiontext']);
          imagettftext ( $dest, 24, 0, $x , $y , $color , $fontfile , $text );
  
  }
  </code></pre>
  
  <p>I am aware that imagettftext xy starts at the bottom left of the first character of the text, but I cannot get a proper correlation between the two to accurately place the text. What can I do to get the correct placement of the text on the image to merge it?</p>