convert HTML canvas content to send it angular form data request on laravel backend

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

Interesting question - can you `dd` out the `$image` variable and paste the content. — Chris, Dec 28 '15 at 12:27
Should I do it for you,are you still there coz some just answered ? — Dagm Fekadu, Dec 28 '15 at 13:20

Armen · Answer 1 · 2015-12-28T13:22:45.800

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

edited Dec 28 '15 at 13:22

answered Dec 28 '15 at 12:53

Armen

4,064
2
23
40

I think you missed my point here ,becuase I use no php at the frontend,So how could I use this code – Dagm Fekadu Dec 28 '15 at 13:18
you no need php at `frontend` you can in same way as now using angular js process your canvas staff take its data and then submit it to server side and save it you need to use `php` only on save step, i updated my answer with addition of **JS**,**PHP** labels – Armen Dec 28 '15 at 13:22
its not working for me okay few things why are we calling base64_decode() and can you do this using laravels api like file.Move() ,rather than putcontents – Dagm Fekadu Dec 28 '15 at 13:38
probably we are missing something at some point what gives you `var_dump($request->userId.$request->gameId.".jpg") - is it correct image name?` and `var_dump($request->image) - douse it contain any data ?` we are calling `base64_decode()` as data taken from canvas base64 encoded, secondary we can't call `laravel`'s Move() as data submitted from form is not correct image data as laravel except it douse not contain `tmp_name`,`name`,`size` ... as standard submitted image contain it just image data taken from canvas – Armen Dec 28 '15 at 13:48
here is vardump out put "missing boundary in multipart/form-data POST data " but dataUrl does contain the image content surely (I have tested it ),what would possibly be the error.And am assuming its the request and dataurl problem because to be in form request should be a file right – Dagm Fekadu Dec 28 '15 at 13:55
Hey brother It just worked for me removing "headers: { 'content-type': 'multipart/form-data'}," ,Now I need to conver the content to valid image of type .jpg any help – Dagm Fekadu Dec 28 '15 at 14:05
i think you can't convert it to real image and use `->move()` only the option is to use `file_put_contents`+`base64_decode`, also check this article http://stackoverflow.com/questions/19254029/angularjs-http-post-does-not-send-data to make correct post request you need to set `Content-Type: application/json` headers so that post will submit all data to server correctly – Armen Dec 28 '15 at 14:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99173/discussion-between-dagm-fekadu-and-armen). – Dagm Fekadu Dec 29 '15 at 07:28

convert HTML canvas content to send it angular form data request on laravel backend

1 Answers1