Saving image from canvas in server through Jquery and PHP

Question

I am trying to store Canvas image to server through PHP I can see the file but it shows 0 bytes. Can you please help me to fix this issue.

Here is my code below:

HTML:

<img id="image" src="data:image/png;base64,iVBORw0K..." />

JQUERY:

$('.submit').unbind().click(function(){
var dataURL = $('#img').attr('src');
 $.ajax({
  type: "POST",
  url: "saveimage.php",
  dataType: 'json',
  cache: false,
  data: { 
   imgBase64: dataURL
  }
 });
});

PHP:

$upload_dir = "../images/";
$img = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
file_put_contents($file, $data);

ɢʀᴜɴᴛ · Accepted Answer · 2017-04-22 20:49:14Z

2

It should be $img = $_POST['imgBase64'] not $img = $_POST['data'] in your php

as your data object 's key name is imgBase64 when sending the ajax post request

answered Apr 22, 2017 at 20:49

ɢʀᴜɴᴛ

33k15 gold badges123 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Saving image from canvas in server through Jquery and PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related