Categories: javascript, php, jquery, ajax, canvas

Send a Image URL to PHP using AJAX [closed]

1 answer

I have converted canvas to image using DataUrl. And i am sending that URL through AJAX but on php side it shows error of Undefined index: imgBase64. I am getting error in $img variable. i have tried to echo DataURL and it perfectly works. but there must be some error in mine code of AJAX

demo.php <!DOCTYPE HTML> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head>    <body>    <canvas id="myCanvas" width="578" height="200"></canvas>    <script type="text/javascript" >    var canvas = document.getElementById('myCanvas');    var context = canvas.getContext('2d');    // draw cloud   context.beginPath();   context.moveTo(170, 80);   context.bezierCurveTo(130, 100, 130, 150, 230, 150);   context.bezierCurveTo(250, 180, 320, 180, 340, 150);   context.bezierCurveTo(420, 150, 420, 120, 390, 100);   context.bezierCurveTo(430, 40, 370, 30, 340, 50);   context.bezierCurveTo(320, 5, 250, 20, 250, 50);   context.bezierCurveTo(200, 5, 150, 20, 170, 80);   context.closePath();   context.lineWidth = 5;   context.fillStyle = '#8ED6FF';   context.fill();   context.strokeStyle = '#0000ff';   context.stroke();   // save canvas image as data url (png format by default)   var dataURL = canvas.toDataURL();   document.write(dataURL);   $.ajax({     type: "POST",     url: "http://localhost/C/imagerestore.php",     data: {              imgBase64: dataURL           }     }).done(function(o) {         console.log('saved');  });  </script> 

imagerestore.php  <?php    define('UPLOAD_DIR', 'images/');    $img = $_POST['imgBase64'];    $img = str_replace('data:image/png;base64,', '', $img);    $img = str_replace(' ', '+', $img);    $data = base64_decode($img);  $file = UPLOAD_DIR . uniqid() . '.png';    $success = file_put_contents($file, $data);    print $success ? $file : 'Unable to save the file.';    ?>    

All answers to this question, which has the identifier 61206549

The best answer:

With the same php code, try this javascript:

let url = "http://localhost/C/imagerestore.php"; let data = "imgBase64=" + dataURL; url += '?' + data;  let request = new XMLHttpRequest(); request.open('POST', url); 

Instead of

var dataURL = canvas.toDataURL(); document.write(dataURL); $.ajax({ type: "POST", url: "http://localhost/C/imagerestore.php", data: {          imgBase64: dataURL       } }).done(function(o) {     console.log('saved'); }); 

And answer back if still showing the same error... preferably to paste the error here

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data