2

I tried saving the image of the canvas to my Database. The binary code was there but the problem is the display.

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):

<div class="ui-widget-header ui-corner-top">Display Cake</div>
<div class="ui-widget-content ui-corner-bottom">                            
<div id="disp_card" class="disp_temp" style="width: 100%;border: none; z-index: 1;"></div></div>

So after it, I have a preview button where I convert the disp_card into Image using canvas.

Here's the code I have:

<script type="text/javascript"> // 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();
});
});
</script>

THen this is the html:

<div id="savecanvas"> 
<canvas id="preview_image" width="600" height="400" style="margin: 0 auto;"></canvas></div>

After designing the new generated cake image will be stored in my database.

Binary code

This is the php $savecanvas = str_replace(' ', '+', $_POST['canvas']); it workd properly.

Hope someone could help me out. THANK YOU

Khyana
  • 195
  • 1
  • 14
  • what is the question? Do you want to convert image base64 string to image file? – Mubashar Iqbal Apr 13 '17 at 08:13
  • It did convert but the problem is that it won't display. It only shows "crack image". I would like to know if there's something I miss in my code or change. – Khyana Apr 13 '17 at 12:33
  • you have to use string after base64. check here: http://stackoverflow.com/questions/15153776/convert-base64-string-to-an-image-file – Mubashar Iqbal Apr 13 '17 at 13:30
  • and here is online converter where you can check your base64 encoded string is correct or not? http://codebeautify.org/base64-to-image-converter – Mubashar Iqbal Apr 13 '17 at 13:31

0 Answers0