title: PHP GD live edit image using Ajax
body: <p>I have a form where I POST some variables to make an image (text, padding, background image and text position)</p>
  
  <pre><code>&lt;form id="form" action="img.php" method="post" name="form"&gt;
  &lt;label&gt;text&lt;/label&gt; &lt;textarea name="text"&gt;&lt;/textarea&gt;
  &lt;label&gt;Author&lt;/label&gt; &lt;input name="author"&gt;&lt;/input&gt;
  &lt;label&gt;text padding&lt;/label&gt; &lt;input type="number" name="padding" min="10" max="200" value="30"&gt;
  text-align:
  &lt;input type="radio" name="align" value="1"&gt; left
  &lt;input type="radio" name="align" value="0" checked="yes"&gt; center
  &lt;input type="radio" name="align" value="2"&gt; right
  &lt;select name="background"&gt;
  &lt;option&gt;- select image -&lt;/option&gt;
  &lt;?php $range = range(0, 177);
  foreach ($range as $key) { ?&gt;
  &lt;option id="img" value="src/img&lt;?php echo $key;?&gt;.jpg"&gt;src/img&lt;?php echo $key;?&gt;.jpg&lt;/option&gt;
  &lt;?php } ?&gt;
  &lt;/select&gt;
  &lt;input class="btn btn-success" type="submit" value="submit"&gt;&lt;/input&gt;
  &lt;/form&gt;
  
  &lt;div id="result"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The script works very well when I send those variables to the img.php file. I wanted to do a live modification on the same page, like an image editor with ajax, but when I run this script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          // loader
          $().ajaxStart(function(){
              $('#loading').show();
              $('#result').hide();
          }).ajaxStop(function(){
              $('#loading').hide();
              $('#result').fadeIn('slow');
          });
          // post submit values
          $('#form').submit(function(){
              // ajax
              $.ajax({
                  type: 'POST',
                  url: $(this).attr('action'),
                  data: $(this).serialize(),
                  success: function(data) {
                      $('#result').html(data);
                  }
              })
              return false;
          });
  
      })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This error comes up on the html file and I can't get the image:</p>
  
  <pre><code>����JFIF��&gt;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), default quality ��C     $.' ",#(7),01444'9=82&lt;.342��C     2!!22222222222222222222222222222222222222222222222222����"��   ���}!1AQa"q2���#B��R��$3br� %&amp;'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������� ���w!1AQaq"2�B���� #3R�br� $4�%�&amp;'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������?��'*���d^�~��N�7��dWF�E�����F�E!�8�QrG��H=y�+V�R�ei�ֳK����tX8����&lt;����(R�ϥHaR�s �a��p���y�QbTe��_)�1���qW^�&amp;� �73}��l�Ƴ��.`�E�-�-'#a�*ݏ�Zvךm��g^���&amp;���ڄ�0"�tE��R]:I���U�\u�oǊ��o�a:T�%gF���s�?�*�Y���W�-�YL`���p2O_z�n��#�=:���l���T[��&lt;�Y�6�̲/Ƹ�Ye�7����%W#��@���խm��d�s��o_�qQ�Ln���nC��'�ןҁ���/�� �������t�ޞ9N6�e��Ю?�dxN��Y�P+Ӧ��*�w���/���l�|�����?Z��6�q/�#c����d���Ȫ�͙N"/*�V���#4�������(1:��YF$�n=*��D H8ɦ%��R�I����AP~��օs������g �;FB���T� ��S��7kB�L�M�Gǿ4��_Ean��� ��S\����ߝ"&lt;��U8&gt;�ڬ"�+8�y��va�?Z��9�m��sO�wo���N    �HE���%eDY  ,�... and goes on...
  </code></pre>
  
  <p>How can I get the image with ajax?</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The img.php works fine when I submit those variables to the img.php window on the browser but its kinda extense to post it here, this is a sample:</p>
  
  <p>img.php</p>
  
  <pre><code>&lt;?php 
  require_once("functions.php");
  header("Content-type: image/jpeg");
  
  // Settings
  $fontSize = 28;
  $font = "./fonts/Oswald-Medium.ttf";
  $fontlogo = "./fonts/Quicksand-Bold.otf";
  
  $background = $_POST['background'];
  $text = $_POST['text'];
  $author = $_POST['author'];
  $padding = $_POST['padding']; //from edges
  $align = $_POST['align'];
  
  .
  .
  etc
  .
  .
  
  $md = md5($background).".jpg";
  imagejpeg($im, './images/'.$md);
  imagejpeg($im);
  imagedestroy($im);
  ?&gt;
  </code></pre>
  
  <p>The problem it's on the ajax script to make a live edit of those variables and generate de image on the same window.</p>