如何使用Filepond制作缩略图，以及正常大小的上传

Question

I've managed to make Filepond upload files, put them in the right folder and add the necessary details to a mysql database. However, since the original images are very high resolution, I need to make thumbnails. Smaller versions of the images that should go in a subfolder called "thumbnails".

I am using the PHP boiler plate, and some of the documentation don't cover the methods used there. For instance, I tried, just for testing, to do this:

    FilePond.setOptions({
        maxFileSize: '25MB',
        instantUpload: true,
        server: 'api/',
        imageTransformVariants: {
            'thumb_medium_': transforms => {
                transforms.resize.size.width = 384;
                return transforms;
            },
            'thumb_small_': transforms => {
                transforms.resize.size.width = 128;
                return transforms;
            }
        }

    });
    let pond = FilePond.create(document.querySelector('input[type="file"]'));

Which gives me this error:

index.php?id=1383:67 Uncaught (in promise) TypeError: Cannot read property 'size' of undefined
    at thumb_medium_ (index.php?id=1383:67)
    at filepond-plugin-image-transform.js:898
    at filepond-plugin-image-transform.js:987
    at new Promise (<anonymous>)
    at filepond-plugin-image-transform.js:986
    at filepond-plugin-image-transform.js:1066
    at Array.map (<anonymous>)
    at filepond-plugin-image-transform.js:1065
    at new Promise (<anonymous>)
    at filepond-plugin-image-transform.js:941

Obviously I could make a second Filepond-upload for the thumbnails but I suspect there should be a way to do this automatically. How do I make variants work and also, how to make them in a different folder and the same filename, rather than giving them a prefix?

Answer 1

Are you using Doka? I think Doka allows you to set the transforms client side and then the server will perform them - although I don't know for sure. The other alternative is to write a simple php script to do the compressions for you as you only really want to be uploading one image.

Maybe something like the following to compress images on server if you want to do this yourself?

function compressImage($source, $destination, $newWidth = 384) {

    // get image & details
    $info = getimagesize($source);
    $width = $info[0];
    $height = $info[1];
    $ratio = $width / $height;
    // calculate new heights
    $newHeight = $newWidth / $ratio;
    // create temp blank image
    $compressedImg = imagecreatetruecolor($newWidth, $newHeight);

    if ($info['mime'] == 'image/jpeg') {
        $image = imagecreatefromjpeg($source);
        imagecopyresampled($compressedImg, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
        // adjust quality if needed
        imagejpeg($compressedImg, $destination, 75);
        return true;
    } elseif ($info['mime'] == 'image/png') {
        $image = imagecreatefrompng($source);
        imagecopyresampled($compressedImg, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
        // adjust compression if needed (0 not compressed, 9 highest compression)
        imagepng($compressedImg, $destination, 9);
        return true;
    }
    return false;
}

compressImage('/path/to/image/filename.jpg', '/path/to/image/thumbnails/filename.jpg');

Disclaimer - I haven't tested this code