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

Question

我一直在寻找解决此问题的方法，已经有两天了。我发现最常见的答案是“它可以在服务器上工作，但不能在本地计算机上工作。”。我可以证实情况并非如此。 这在服务器上也不起作用...

我从较大的上下文中提取了相关数据以提出问题...

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

我也使用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");

当我添加那条线时，就创建了图像。这就是使我相信警报和用户单击“确定”之间创建的延迟使脚本需要时间来获取画布数据。

但是Alert并没有更改Chrome中的行为。

有人可以帮我解决这个问题。

谢谢。

Answer 1

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

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

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

另一种方式（我希望这样做）：使用promises-在此处进行描述： http : //docs.angularjs.org/api/ng。$ q

另一个问题是，angular无法识别此行中的更改：$ scope.imageData = dataUrl; 因为它是在有角度的地方完成的。 您应该在$ scope。$ apply函数中运行代码：

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

如果您使用promise angular，则会在引擎盖下执行此操作。