javascript - Angularjs - Kineticjs Canvas toDataUrl 无法在 Chrome 上工作 - 同一域上的图像

Question

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

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

我操作kineticjs舞台( Canvas )，然后需要将编辑后的图像保存到服务器...

我也使用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 上却不行，而且它适用于我的锁定机器和服务器..

经过一番摆弄后，我意识到该行为看起来像是在 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");

当我添加该行时，图像就会被创建。这让我相信警报和用户单击“确定”之间产生的延迟为脚本提供了获取 Canvas 数据所需的时间。

但是警报并没有改变 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 
        ...
    }
});

另一种方式(我更喜欢这种方式):使用 Promise - 此处描述:http://docs.angularjs.org/api/ng .$q

另一个问题是 Angular 不知道这一行的变化: $scope.imageData = dataUrl;因为它是在 Angular 之外完成的。您应该在 $scope.$apply 函数中运行代码:

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

如果你使用 Promise Angular 将在幕后执行此操作。