I've been trying to find a solution to this issue for the past couple of days. The common response I come across is "it works on the server but not on the local machine," but in my case, it doesn't work on either...
I've extracted the necessary data from a larger context to present my question...
I'm working with KineticJS stage (canvas) and need to save the edited image to the server...
Additionally, I'm using Angularjs, and here's the code responsible for sending an xhr request:
$scope.saveStage = function (){
$scope.imageData = "";
$scope.isUser = "Tom";
stage.toDataURL({
callback: function(dataUrl) {
$scope.imageData = dataUrl;
}
});
alert("Edited Version of Your Template Will be Saved to your File Manager");
$scope.phpCtrlUrl = "saveData.php";
$scope.savedData = { imageData:$scope.imageData, isUser:$scope.isUser };
$http({
url: $scope.phpCtrlUrl,
data: $scope.savedData,
method: 'POST',
headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
}).success(function(data){
console.log(data);
}).error(function(err){"ERR", console.log(err)})
}
On the server side, I'm using PHP to handle the data and image saving process
$postdata = file_get_contents("php://input");
$data = json_decode($postdata, true);
$isUser = $data['isUser'];
$rawImageData = $data['imageData'];
// Decode image data
$filteredData = explode(',', $rawImageData);
$decodedImageData = base64_decode($filteredData[1]);
// Create the image
$imageName = "IMAGE_NAME";
$fp = fopen($imageName . '.png', 'w');
fwrite($fp, $decodedImageData);
fclose($fp);
This process works smoothly on Firefox, but Chrome seems to have some issues both locally and on the server...
After experimenting a bit, it appears that there might be a delay in the toDataURL callback, similar to problems encountered when preloading images into the DOM in JavaScript
stage.toDataURL({
callback: function(dataUrl) {
$scope.imageData = dataUrl;
}
});
In Firefox, leaving out the line below causes an issue:
alert("Edited Version of Your Template Will be Saved to your File Manager");
Adding that line allows the image creation. This leads me to think that the script needs time between the alert and user clicking OK to obtain the canvas data.
However, the alert doesn't change the behavior in Chrome...
If anyone could assist me in resolving this, I would greatly appreciate it.
Thank you!