title: Store and Display image using canvas in database
body: <p>I tried saving the image of the canvas to my Database.
  The binary code was there but the problem is the display.</p>
  
  <p>So basically I have a customization page where you will design a cake.
  It's not in canvas yet, only used a css.
  This is my code where the customization happens (display):</p>
  
  <pre><code>&lt;div class="ui-widget-header ui-corner-top"&gt;Display Cake&lt;/div&gt;
  &lt;div class="ui-widget-content ui-corner-bottom"&gt;                            
  &lt;div id="disp_card" class="disp_temp" style="width: 100%;border: none; z-index: 1;"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>So after it, I have a preview button where I convert the disp_card into Image using canvas.</p>
  
  <p>Here's the code I have:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; // gets the binary code of the canvas to save in the database
  
  var canvas1 = document.getElementById('preview_image');
  var contextSource = canvas1.getContext('2d');
  var canvasall = document.getElementById('preview_image');
  var context = canvasall.getContext('2d');
  context.drawImage(canvas1, 0, 0);
  var base64="";
  $(function () { 
  $("#submitBtn").bind("click", function() {
  base64 = $('#preview_image')[0].toDataURL();
  $("#show_canvas").attr("src", base64);
  $("#show_canvas").show();
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>THen this is the html:</p>
  
  <pre><code>&lt;div id="savecanvas"&gt; 
  &lt;canvas id="preview_image" width="600" height="400" style="margin: 0 auto;"&gt;&lt;/canvas&gt;&lt;/div&gt;
  </code></pre>
  
  <p>After designing the new generated cake image will be stored in my database.</p>
  
  <p><a href="https://i.stack.imgur.com/prjaI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/prjaI.jpg" alt="Binary code"></a></p>
  
  <p>This is the php
   $savecanvas = str_replace(' ', '+', $_POST['canvas']);
  it workd properly.</p>
  
  <p>Hope someone could help me out.
  THANK YOU</p>