Question

我正在使用cropper js和laravel，我将图像裁剪并放入formdata中，然后由Jquery Ajax将其发送到Laravel控制器。我没有在控制器中获取数据的问题。但只会得到一个错误。代码如下：

HTML

<button type="button" name="button" id="crop">Crop</button>
<img src="{{asset('public/img/img.jpg')}}" id="image" alt="" style="height: 500px;">

jQuery和Cropper Js代码

<script src="{{asset('public/js/jquery.min.js')}}"></script>
<script src="{{asset('public/js/cropper.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
  var ele = document.getElementById('image')
    var cropper = new Cropper(ele);

    $('#crop').on('click', function(){
      var crop = cropper.getCroppedCanvas();
      crop.toBlob(function(blob){
        var formdata = new FormData();
        console.log(blob);
        formdata.append('croppedImage', blob);

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax("{{url('crop/save')}}", {
          method: "POST",
          data: formdata,
          enctype: 'multipart/form-data',
          cache: false,
          processData: false,
          contentData: false,
          success(data){
            console.log(data);
          },
          error(data){
            console.log(data);
          },
        });
      });

    });
});
</script>

拉威尔（Laravel）路线

Route::post('crop/save', 'CropperController@save');

Laravel控制器

 public function save(Request $request){
  $data = $request->croppedImage;
  var_dump($data);
  //Here I want to get image and upload it on the system
  //But I cant Understand How
}

错误

 <br />
 <b>Warning</b>:  Unknown: Input variables exceeded 1000. To increase the limit change max_input_vars in php.ini. in <b>Unknown</b> on line <b>0</b><br />

请指导我，如何以正确的方式完成此操作。提前致谢。问候

Answer 1

您需要使用Blob数据创建一个新图像并将其保存。

首先，您需要获取图像的实际内容，其中包括data:image/png;base64,或data:image/jpeg;base64,

之后的所有内容。

（您可以使用Blob的第一部分来获取扩展名类型，以便以后可以使用相同的扩展名保存图像。）

这可以做到：

$base64Str = substr($data, strpos($data, ",")+1);

接下来，您需要对base64中的内容进行解码

$file = base64_decode($base64Str);

然后，指定保存新图像的路径。您可以将随机生成器与当前时间戳结合使用，以获取每个文件的唯一名称。

public function generateUniqueFileName($extension)
{
    return md5(uniqid(rand(), true)) . '-' . md5(microtime()) . '.' $extension;
}

$fullPath = 'public/images/' . $this->generateUniqueFileName($extension);

最后，您可以将图像存储到指定的路径：

Storage::put($fullPath, $file);

Answer 2

您也可以尝试执行此操作，因为AJAX中的网址是发布请求，请转到app / Http / Middleware / VerifyCsrfToken.php并执行此操作

protected $except = [
        'crop/save'
    ];

然后在您的控制器中可以像这样保存图像

public function fileUpload(Request $request){
        $file = $request->file('croppedImage');
        if($file) {

            $file->move(public_path() .'/images', $filename);
        }
    }

OR

 public function fileUpload(Request $request){
            $file = $request->file('croppedImage');
            if($file) {

                 Storage::disk('local')->put($filename, File::get($file));
            }
        }

如果您使用第二种方法，请不要忘记在控制器顶部执行此操作。

use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Storage;

$ filename变量是您选择用来保存文件的名称。

如何在laravel控制器中通过Cropper Js接收图像斑点数据

2 个答案: