Javascript Angularjs-Kineticjs canvas toDataUrl不适用于同一域上的Chrome图像

2天来，我一直在寻找解决方案。。我发现最常见的答案是“它在服务器上工作，但在本地机器上不工作”。。我可以证实事实并非如此。这在服务器上也不起作用

我从一个更大的背景中提取了相关数据来提出这个问题

我操作kineticjs阶段（画布），然后需要将编辑的图像保存到服务器

我还使用Angularjs，发送xhr请求的代码如下

$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)})

}

在服务器端，我使用php保存数据和图像

    $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);

这在Firefox上运行得非常好，但在Chrome上却不行，我的locak机器和服务器都可以使用

在做了一点修改之后，我意识到该行为看起来像是在

toDataURL

回调中有延迟。。在我看来，在JavaScript中将图像预加载到DOM中也存在同样的问题

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

在Firefox中，如果我省略这一行，就会出现问题

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

当我添加该行时，将创建图像。。这让我相信，警报和用户单击OK之间产生的延迟给了脚本获取画布数据所需的时间

然而，警报并没有改变Chrome中的行为

有人能帮我解决这个问题吗

---

谢谢。

stage.toDataURL看起来像一个异步调用。你有很多可能解决你的问题。例如，将代码放入回调函数中

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

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

另一种方式（我更喜欢这种方式）：使用承诺——这里描述：.$q

另一个问题是angular不知道这一行中的更改：$scope.imageData=dataUrl；因为它是在有棱角的地方做的。您应该在$scope中运行代码。$apply函数：

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

---

如果您使用，我们将在引擎盖下完成此操作。

非常感谢。我已经能够通过将一个异步调用包装到另一个异步调用来实现临时解决方案。。不过，我将更深入地了解ng js，并学习如何恰当地做到这一点（通过写承诺）