Question

我一直在寻找解决方案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中的行为。

请有人帮我解决这个问题。

谢谢。

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 function：

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

如果使用promises angular会在引擎盖下执行此操作。

Angularjs - Kineticjs canvas toDataUrl无法在Chrome上运行 - 同一域上的图像

1 个答案: