Laravel 5 - blurry image after upload - intervention

Question

I am making an eCommerce web portal. I am trying to upload the image in different resolutions, which is working completely fine.

But the problem is that, if I view it in the browser after uploading, I get to see the blurry image which is not what I want. I want that after the upload, the image should be clearly seen and it should not be blurry.

Here's the controller method for it:

public function store( AddProductRequest $request ) {
    if(\Auth::guest()) {
        return redirect('/admin');
    }

    $imageType = [
        'thumbnail' => [
            'height' => 75,
            'width' => 75
        ],
        'product' => [
            'height' => 450,
            'width' => 450
        ],
        'cart' => [
            'height' => 200,
            'width' => 200
        ]
    ];

    if ( $request->file( 'image_file' ) ) {
        $fileName = $request->file( 'image_file' )->getClientOriginalName();

        $fileName = explode( '.', $fileName );
        $image = \Image::make( $request->file( 'image_file' ) );
        $path = public_path( 'images/uploads/' );

        foreach ($imageType as $key => $value) {
            if ($key == 'thumbnail') {
                $image->resize( $value['width'], $value['height'], function( $constraint ) {
                    $constraint->aspectRatio();
                });
                $image->save( $path.$fileName[0]."-thumbnail-". $value['width'] ."-".$value['height'] .".jpg", 100 );
            } elseif ( $key == 'product' ) {
                $image->resize( $value['width'], $value['height'], function( $constraint ) {
                    $constraint->aspectRatio();
                });
                $image->save( $path.$fileName[0]."-product-". $value['width'] ."-".$value['height'] .".jpg", 100 );
            } elseif ( $key == 'cart' ) {
                $image->resize( $value['width'], $value['height'], function( $constraint ) {
                    $constraint->aspectRatio();
                });
                $image->save( $path.$fileName[0]."-cart-". $value['width'] ."-".$value['height'] .".jpg", 100 );
            }
        }
    }       

    $product = Product::create( $request->all() );

    $product->tags()->attach( $request->input('tags') );

    \Session::flash('product_added', 'Product has been successfully added in the database.');
    return redirect('admin/products');
}

How do I avoid displaying blurry image after upload ?

Kindly help me. Thanks in advance.

What is the size of the original image, and what is the size of the resized image ? — FrancoisBaveye, Apr 21 '15 at 12:41
Original size of the image is 1000x1000. Resized image size is that given in the array. — Saiyan Prince, Apr 21 '15 at 12:43
Well, I am directly accessing it via the URL. I will put the code, once the error is resolved. — Saiyan Prince, Apr 21 '15 at 12:59
I have used the [placehold](http://placehold.it/450) link and for uploading, I am using a random image. — Saiyan Prince, Apr 21 '15 at 13:28
FYI I have heard of such problems before. Dunno an answer though — Margus Pala, Apr 21 '15 at 14:08
fyi, an output image quality of _80_ seems to give reasonable quality and a useful reduction in file size. — Ryan Vincent, Apr 22 '15 at 04:08

Ryan Vincent · Accepted Answer · 2015-04-22T02:15:54.063

The issue with the current code is that the same image file is being manipulated. This results in the original file being resized to a 'thumbnail', This thumbnail then gets resized resulting in the 'blocky' output.

The answer is to create a new 'Image' file of the original file for each 'resize' operation.

Also the code can be simplified as all the information to generate the output filenames is in the $imageType array.

I do not have a 'framework' so i changed the function to take a filename and an output directory. Actually the input filename is put in an SplFileInfo structure so i can easily access the various parts of the filename but that is just a detail.

Here is the function, the only real change to the processing is the recreation of the 'Image' from the original each time.

<?php
function store(SplFileInfo $imageFile,
                $outDirectory) {

    $imageType = array(
        'thumbnail' => array(
            'height' => 75,
            'width' => 75
        ),
        'product' => array(
            'height' => 450,
            'width' => 450
        ),
        'cart' => array(
            'height' => 200,
            'width' => 200
        )
    );

    if (file_exists($imageFile->getRealPath())) {

        $fileName = explode('.', $imageFile->getFilename());
        $path = $imageFile->getPath();

        foreach ($imageType as $key => $value) {
            $image = Image::make($imageFile->getRealPath());
            $image->resize($value['width'], $value['height'],
                    function($constraint) {
                               $constraint->aspectRatio();
                    });
            $outFilename = $fileName[0] ."-{$key}-".
                           $value['width'] ."-". $value['height']
                            .".". $imageFile->getExtension();
            $image->save($outDirectory .'/'. $outFilename, 100);
        }
    }

    return true;
}

I will display it working if required.

Laravel 5 - blurry image after upload - intervention

1 Answers1