How to recieve image blob data by Cropper Js in laravel controller

Solution:

You need to create a new image using the blob data and save that.

First, you need to get the actual contents of the image which is everything after: data:image/png;base64, or data:image/jpeg;base64,

(You can use the first part of the blob to get the extension type so you can save out the image using the same extension later.)

This will do that:

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

Next, you need to decode the contents as it is in base64

$file = base64_decode($base64Str);

Then, specify the path to save the new image. You can use a random generator combined with the current timestamp to get a unique name for each file.

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

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

Finally, you can store the image to the specified path:

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