Angularjs - Kineticjs canvas toDataUrl無法在Chrome上工作 - 同一域上的圖像

我一直在尋找這樣的解決方案2天..我發現最常見的答案是「它在服務器上工作，但不在本地計算機上」 ..我可以證實情況並非如此。這不會對服務器或者......工作Angularjs - Kineticjs canvas toDataUrl無法在Chrome上工作 - 同一域上的圖像

我從提取更大範圍內的相關數據要問的問題...

我操縱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回調..在我看來liek存在圍繞在JavaScript中預加載圖像DOM同樣的問題

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

在Firefox中存在一個問題，如果我離開了這條線

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

當我添加該行時，圖像被創建。這導致我相信警報和用戶單擊「確定」之間創建的延遲會使腳本需要時間來獲取畫布數據。

警報但並未改變Chrome中的行爲。

有人可以幫我解決這個請。

謝謝。

來源

2014-01-06 GRowing

stage.toDataURL看起來像是一個asynchronys調用。你有很多可能性解決你的問題。例如把你的代碼放在回調函數中。

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

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

另一種方式（我寧願這樣）：使用的承諾 - 這是這裏描述：http://docs.angularjs.org/api/ng $ Q

另一個問題是，角度是不知道的變化在這條線：$範圍。 imageData = dataUrl;因爲它是在角度外部完成的。 $ apply函數：

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

如果你使用promises角將在引擎蓋下做到這一點。

來源

2014-01-06 08:36:08 michael

非常感謝。我已經能夠通過將一個異步調用包裝到另一個來做臨時解決方案..但是，我將深入研究ng-js，並學習如何正確執行此操作（通過編寫promise） – GRowing

Angularjs - Kineticjs canvas toDataUrl無法在Chrome上工作 - 同一域上的圖像

回答

相關問題