AngularJS-Kineticjs canvas toDataUrl在Chrome上不起作用-同一域上的图像

Question

I have been searching for a solution to this for 2 days.. the most common answer I find is "it works on the server but not on local machine".. I can verify that that is not the case. This does not work on server either...

I extracted the relevant data from a larger context to ask the question...

I manipulate kineticjs stage (canvas) and then need to save edited image to server...

I also use Angularjs and the code that sends an xhr request is this

$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 use php to save data and image

    $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 works really nice on Firefox but on Chrome it doesn't and it goes both for my locak machine and server..

After fiddling around a bit I realized that the behavior looks like there is a delay in the toDataURL callback.. It looks to me liek the same problem that exists around preloading images to DOM in JavaScript

    stage.toDataURL({
        callback: function(dataUrl) {
            $scope.imageData = dataUrl;
        }
    });

In Firefox there is an issue if I leave out this line

alert("Edited Version of Your Template Will be Saved to your File Manager");

When I add that line the image gets created.. That is what lead me to believe that the delay created between alert and user clicking OK give the script needed time to get the canvas data.

Alert however did not change the behavior in Chrome.

Could someone help me resolve this please.

Thank you.

Answer 1

stage.toDataURL looks like an asynchronys call. You have a lot of possibilities solve your problem. For example put your code in the callback function.

stage.toDataURL({
    callback: function(dataUrl) {
        $scope.imageData = dataUrl;

        $scope.phpCtrlUrl = "saveData.php";
        $scope.savedData = { imageData:$scope.imageData, isUser:$scope.isUser };
        $http 
        ...
    }
});

another way (I would prefer this): use promises - this is described here: http://docs.angularjs.org/api/ng .$q

Another problem is that angular is not aware of the changes in this line: $scope.imageData = dataUrl; because it is done outsite of angular. You should run your code within an $scope.$apply function:

$scope.$apply(function(){
     $scope.imageData = dataUrl;
}); 

If you use promises angular will do this under the hood.