Phonegap to Laravel image upload is blank/white - php

Question

Phonegap is telling success, Laravel is telling me success but it's always white.
Phonegap (Android) two relevant code blocks of js are:
function sendImage(src) {
window.localStorage.setItem('csrf', csrf);
src = (src == 'library') ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA;
navigator.camera.getPicture(success, fail, {quality: 45, sourceType: src});
function success(imageData) {
imageData = getBase64Image(imageData);
userId = window.localStorage.getItem("user_id");
var url = 'https://example.com/profile/update/picture';
var params = {photo: 'image/png;space,' + imageData, user_id: userId};
//csrf = window.localStorage.getItem("csrf");
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: params,
headers: {"x-csrf-token": 'notoken'},
async: false,
success: function(res)
{
if(res.success)
{
alert("Success!");
}
},
complete: function(res)
{
},
error: function(res)
{
alert("Error = " + JSON.stringify(res));
}
});
}
function fail(error){
alert('You are FAIL');
}
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
//use this block to not draw image unless image is loaded
var callback = function(image) {
if(!image) image = this;
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(image, 0, 0);
}
//check if image is loaded
if(img.complete) {
callback(img);
}else {
img.onload = callback;
}
//get the data-URL formatted image
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
}
In Laravel the photo is updating to blank or empty. At one point I have this code block in there that was returning true so Laravel at least thinks that image is legit:
public static function check_base64_image($base64) {
$img = imagecreatefromstring(base64_decode($base64));
if (!$img) {
return false;
}
imagepng($img, 'tmp.png');
$info = getimagesize('tmp.png');
unlink('tmp.png');
if ($info[0] > 0 && $info[1] > 0 && $info['mime']) {
return true;
}
return false;
}

Answer 1

If you obtain blank or transparent image which means your drawing function called before image totally uploaded. Javascript works asynchron. In your code below two lines executed before your callback() function executed.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");