转换HTML画布内容以在laravel后端发送角度表单数据请求

时间:2015-12-28 11:19:41

标签: javascript java php angularjs laravel

将数据网址转换为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转换为图像文件以形成数据请求

1 个答案:

答案 0 :(得分:1)

你可以向php提交dataURL然后用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()图像数据