Laravel Intervention Unable to init from given binary data for WEBP type files

Question

I am trying to upload the binary image to the storage using Laravel Intervention Image but it gives me error as Unable to init from given binary data.

I am using this code

$image = base64_decode($postData['image']);

$destinationPath = storage_path($destinationFolder);

if (!File::exists($destinationPath)) {
    File::makeDirectory($destinationPath, 0777, true, true);
}

$filename = ($fileName != '') ? $fileName : $folderName . '_' . time() . '.jpg';

$imageResult = Image::make($image)->resize($imageWidth, $imageHeight, function ($constraint) {
    $constraint->aspectRatio();
})->save($destinationPath . $filename, imageQuality($image));

if ($imageResult){
    return '/image/' . $filename;
}

return false;

The binary image data is

data:image/webp;base64,UklGRlIFAABXRUJQVlA4IEYFAAAQHACdASpPAHkAPlEQlEojkdHMYDgFBLIAZqA25eJVGRUWLtSnk7iTzHecd0SXUx8+t+zLWt8WJpEWrTTvLe9y9CX9VSAw3YOVEdn4oGm0ZIrnQUIJ7VsI/r+aW0VOJeFoJylth8MmFQHlbPEklNUVbgyVJnINmgXnDbtgj9paOvkDYnVAdv2ErJONHxXyp2eyn7mB6vcVu9AfWuUtDlYxhQG1CEongtTYR0U4jQIbXYTTzN/3G5cAEd0FmVN272q9XHtEAeWzrMHHsZ7YPtpmppalPe8BvhnrwSA+ctaG9iQ6b7pEVBVPAAD+/uy97OjEKfy53WiZp+vshoaLbmP0cVKb4k6hnKsxJdcP+CgaRYQkOjb4FGLJO55Q/c+afu5UzMOW3Tx4pq6YezZD8PSoPz4zk6GAAEL9XDf3c3RwQKG1r2lWKnBonjqCV8/oU/xr4Gv59yLHfFPfneUb6BrG9yoc40NAk+xGkgtKGsIDDanX+uuhaKWGntbgweNVylzqaIqZrCMYGgfkbTo+yPQ0JgHev/+hCnqRe4cEi4VfveeAi+7wBLg2w4tZOj0d7O7gJM6Zj9uaLB6l/3xyvdHwzThmi8na5GMB/v+Y7YAIYCGOV62mQ6XSrBMQHKUoPvIVwUeHVkJFWnUCt6S7yOMa9RkZxe8//Bphx4NhJ/dXc3x7HQESKmLUu8nofAJKiyg7v46s90BuZWpbVYysGbdPR9Shc9nqgYoEazEu+ik00Mr+VLM+/lS8aCumf4on0FkZ/Dn4SGJSU8pc02nt7ncW0e0XwVKx9DE8RfVww8GDv33+1ib7qkv1gsaGBdn60MpW2PzyI1ZDReCh25f4z4RsG91nEpjDr4MmVOaW40nXwNnAfuYawSt+b05IQx9GGw0seGFDJ4hbb+tTatszMiOSjhQ9HsO19t/hVFojVco/cKoG9XUSorPouBOqFqDrciO3+BVFFo5l5JW3Ka0ZtamSCrzt1AUzOndTy82imvJ+NZ1D+iXF92d3XITYsveniLVxEjp+pQIp8pXJ3p3DuFQPxzuQ44E3xWcPimJ7wuJnIrIm8jyFaM4AHJ1OBc/BG+0iP5zUHWl36LGK5VpoDkw34T+sQs9s0gOpG+tNM0uaKmwmONjo2L0tFqaiC4V4aHLO3JqptxoxSjn3BQVG5x/ga/7bz/hqeycRIoGrTuIqKAdCVVrYLEgr39NID+sKzK6BYzr8j9r3JMPZ3+2T09lEwe0u+S7B4wI3rlSz5L3DZspwtfkWcGtZpUCRqgOiWnFnpdIlor1+zvQK2ksDUpf0UbyRW/c59RQIfouYA6cKJUxsQzPPL5yvuIprzjZLY2HRkKFbemgUbPH1nxw28qtf2EixENC3uGus24PjYW8Jz/G5kZ2ioG2UXp00Aru2Z1Hk4AB0G2RPAzhdp1WQEnbqXb5a35eSSv5SGUYQbRDbaQNnyeODfb80a056/Cz7wmTtn5xvWT1UhTg7J/9J/4cCoBkweCOc1exDC4bBpdmwNyB82TfMOL+HcsO/UR1EDkEBdEl2HLQOA2mSntOQ3dTgMQX/71+MtpetptbThjL/fnRMMfVnpovAe2jd4SXx+s8fMNJXcEkO9ZKxIWFH0EwLvzIp8SPc5z+AzLEwfn4aBvVL835u4BsodI+usLpWnlC7Xdz6JMVxKivRpoWgrcIsAF91564sRuvXd3rwozLc0Fb/at7P3B3B5Jc7wPXQ/CH5Y6Thjn0W8zAWnd3VwwB3ZS/Uv/ubq8H7W9He6fvg6Ib/101yfwV8xpmLHwZGmXWgAAAAAAA=

Youth

were you able to solve this? I having the same issue.. thanks – Director

@KimCarlo yes i had solved it with using imagecreatefromwebp() function. Check my answer below – Youth

Answer 1

In addition to using RAUSHAN KUMAR's answer, you can also use InterventionImage like this

Route::get('test', function() {
    $image = 'data:image/webp;base64,UklGRlIFAABXRUJQVlA4IEYFAAAQHACdASpPAHkAPlEQlEojkdHMYDgFBLIAZqA25eJVGRUWLtSnk7iTzHecd0SXUx8+t+zLWt8WJpEWrTTvLe9y9CX9VSAw3YOVEdn4oGm0ZIrnQUIJ7VsI/r+aW0VOJeFoJylth8MmFQHlbPEklNUVbgyVJnINmgXnDbtgj9paOvkDYnVAdv2ErJONHxXyp2eyn7mB6vcVu9AfWuUtDlYxhQG1CEongtTYR0U4jQIbXYTTzN/3G5cAEd0FmVN272q9XHtEAeWzrMHHsZ7YPtpmppalPe8BvhnrwSA+ctaG9iQ6b7pEVBVPAAD+/uy97OjEKfy53WiZp+vshoaLbmP0cVKb4k6hnKsxJdcP+CgaRYQkOjb4FGLJO55Q/c+afu5UzMOW3Tx4pq6YezZD8PSoPz4zk6GAAEL9XDf3c3RwQKG1r2lWKnBonjqCV8/oU/xr4Gv59yLHfFPfneUb6BrG9yoc40NAk+xGkgtKGsIDDanX+uuhaKWGntbgweNVylzqaIqZrCMYGgfkbTo+yPQ0JgHev/+hCnqRe4cEi4VfveeAi+7wBLg2w4tZOj0d7O7gJM6Zj9uaLB6l/3xyvdHwzThmi8na5GMB/v+Y7YAIYCGOV62mQ6XSrBMQHKUoPvIVwUeHVkJFWnUCt6S7yOMa9RkZxe8//Bphx4NhJ/dXc3x7HQESKmLUu8nofAJKiyg7v46s90BuZWpbVYysGbdPR9Shc9nqgYoEazEu+ik00Mr+VLM+/lS8aCumf4on0FkZ/Dn4SGJSU8pc02nt7ncW0e0XwVKx9DE8RfVww8GDv33+1ib7qkv1gsaGBdn60MpW2PzyI1ZDReCh25f4z4RsG91nEpjDr4MmVOaW40nXwNnAfuYawSt+b05IQx9GGw0seGFDJ4hbb+tTatszMiOSjhQ9HsO19t/hVFojVco/cKoG9XUSorPouBOqFqDrciO3+BVFFo5l5JW3Ka0ZtamSCrzt1AUzOndTy82imvJ+NZ1D+iXF92d3XITYsveniLVxEjp+pQIp8pXJ3p3DuFQPxzuQ44E3xWcPimJ7wuJnIrIm8jyFaM4AHJ1OBc/BG+0iP5zUHWl36LGK5VpoDkw34T+sQs9s0gOpG+tNM0uaKmwmONjo2L0tFqaiC4V4aHLO3JqptxoxSjn3BQVG5x/ga/7bz/hqeycRIoGrTuIqKAdCVVrYLEgr39NID+sKzK6BYzr8j9r3JMPZ3+2T09lEwe0u+S7B4wI3rlSz5L3DZspwtfkWcGtZpUCRqgOiWnFnpdIlor1+zvQK2ksDUpf0UbyRW/c59RQIfouYA6cKJUxsQzPPL5yvuIprzjZLY2HRkKFbemgUbPH1nxw28qtf2EixENC3uGus24PjYW8Jz/G5kZ2ioG2UXp00Aru2Z1Hk4AB0G2RPAzhdp1WQEnbqXb5a35eSSv5SGUYQbRDbaQNnyeODfb80a056/Cz7wmTtn5xvWT1UhTg7J/9J/4cCoBkweCOc1exDC4bBpdmwNyB82TfMOL+HcsO/UR1EDkEBdEl2HLQOA2mSntOQ3dTgMQX/71+MtpetptbThjL/fnRMMfVnpovAe2jd4SXx+s8fMNJXcEkO9ZKxIWFH0EwLvzIp8SPc5z+AzLEwfn4aBvVL835u4BsodI+usLpWnlC7Xdz6JMVxKivRpoWgrcIsAF91564sRuvXd3rwozLc0Fb/at7P3B3B5Jc7wPXQ/CH5Y6Thjn0W8zAWnd3VwwB3ZS/Uv/ubq8H7W9He6fvg6Ib/101yfwV8xpmLHwZGmXWgAAAAAAA=';
    $image = imagecreatefromwebp($image);

    return Image::make($image)->resize(100)->response();
});

By calling the route 'test' you will see the image.

Increase

I used the same method imagecreatefromwebp() to upload the image to specific path, check my own answer below. – Youth

Yes I referenced you in the first sentence ;). I just wanted to point out that you can use the result of imagecreatefromwebp($data); directly with InterventionImage if you want. – Increase

Answer 2

As this is a webp type image, so i need to use imagecreatefromwebp() to upload the images. I have written this piece of code for that.

$destinationFolder = 'uploads/';
$folderName = $folder . '_' . $adId;
if ($folderName != '') {
    $folderNames = explode('_', $folderName);
    $folderPath = implode('/', array_map(function ($value) {
        return $value;
    }, $folderNames));
    $destinationFolder .= $folderPath . '/';
}
$destinationPath = storage_path($destinationFolder);
if (!\File::exists($destinationPath)) \File::makeDirectory($destinationPath, 0777, true, true);
$fileName = $folder . '_' . $adId . '_0_' . time() . '.jpg';
$fileName = ($fileName != '') ? $fileName : $folderName . '_' . time() . '.jpg';
$im = imagecreatefromwebp($data);
$imageResult = imagejpeg($im, $destinationPath . $fileName, 100);
imagedestroy($im);
if ($imageResult) return '/image/' . $fileName;
return "/DefaultImage.jpg";

Youth

Answer 3

If you still wants to use your code, you can remove data:image/webp;base64, then use base64_decode after you remove it.

$image=explode(",",$postData['image']);
$image=base64_decode($image['1']);

Murton

Answer 4

Image Intervention can decode your base64 image you can try this

$imageResult = Image::make($postData['image'])->resize($imageWidth, $imageHeight, function ($constraint) {
$constraint->aspectRatio();

Lucilucia