轉換HTML畫布內容以在laravel后端上發送角形數據請求

Question

我的將數據URL轉換為blob並發送到表單請求的js代碼是

                 var canv=document.getElementById("mainCanvas");
             // var dataURL = canv.toDataURL();
              var dataURL = canv.toDataURL('image/jpg');

              // .replace("image/png", "image/octet-stream");
              documentData={"image":dataURLtoBlob(dataURL),"gameName":"emperor","userId":'userId',"gameId":56};
              Game.post(documentData).success(function(response){
                console.log(response);
              });

創建一個blob函數

    function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

我的服務工廠

services.factory('Game', ['$http', function($http){
return {

        get:function(){
            return;
        }

    ,   post:function(documentData){
                return $http(               
                { method: 'POST',
                  url: 'public/Game/store',
                  headers:   {   'content-type': 'multipart/form-data'},
                  data: documentData
         });
        }
    ,

        delete:function(){
            return ;
        }

};

}]）;

laravel后端

               $image=$request->file('image');


             $image->move("game/".$request->gameName."/play/" ,$request->userId.$request->gameId.".jpg");
             return Response(["success"=>true]);

我反復得到這個錯誤說

不能在非對象上移動

我對將dataurl轉換為blob的代碼沒有信心我想做的是將dataurl轉換為圖像文件以形成數據請求

Answer 1

您可以只將canvas的dataURL提交到php並保存，然后使用file_put_contents()這樣

/*JS - add this code in js in laravel view*/
// take data from canvas
var dataURL = canvas.toDataURL();

/*JS - add this code in js in laravel view*/
// preparing data without any dataURLtoBlob conversion
documentData={"image":dataURL,"gameName":"emperor","userId":'userId',"gameId":56}

/*JS - add this code in js in laravel view*/
// you can also remove headers: {'content-type': 'multipart/form-data'},
// from your Ajax
$http({ 
      method: 'POST',
      url: 'public/Game/store',
      data: documentData
});

/*PHP - laravel backend save form controller*/
//then simply save it as image
file_put_contents( 
     $request->userId.$request->gameId.".jpg",
     base64_decode($request->image) 
);

重要提示：在保存之前對圖像數據調用base64_decode()