title: How to save Canvas element to png file with php and ajax?
body: <p>I want to save a html canvas element as an image using php and jquery ajax.
  Here is my code for ajax.</p>
  
  <pre><code>   var  front_image=canvas.toDataURL("image/png");
  //front image is a base_64 string
                   $.ajax({
                    url:base_url+'tabs/profile/save_front_image',
                    type:'POST',
                    data:'front_image='+front_image,
                    success:function(response){
  
  
                    }
                });
  </code></pre>
  
  <p>I m just doing <code>echo</code> in php <code>echo $_POST['front_image']</code> so request and response are same.</p>
  
  <p>When i use this code before ajax it loads image to new tab of browser</p>
  
  <pre><code> var w = window.open('about:blank', 'image from canvas');
     w.document.write("&lt;img src='" + frame_image + "' alt='from canvas'/&gt;");
  </code></pre>
  
  <p>but when i put the same code on ajax response as bellow it doesn't work. Only a blank tab opens in browser. So i m not being able to save image as file.</p>
  
  <pre><code>var w = window.open('about:blank', 'image from canvas');
   w.document.write("&lt;img src='" + response + "' alt='from canvas'/&gt;");
  </code></pre>
  
  <p>I compared string length of <code>frame_image</code> and <code>response</code> also. They are same. I m not sure why image is not loading in response. Please suggest me the answer thanks.</p>