转换HTML画布内容以在laravel后端上发送角形数据请求

Question

My js code to convert data url to blob and send to form request is

                 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);
              });

create a blob function

    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});
}

my service factory on angular

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 backend

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


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

I repeatedly get this error saying

can't call move on non-object

I have no confidence on the codes converting dataurl to blob thing What I am trying to do is convert dataurl to image file to form data request

Answer 1

You can submit to php just canvas dataURL and save it then with file_put_contents() like this

/*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) 
);

Important: is to call base64_decode() on image data before save