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

时间:2019-05-01 10:02:14

标签: javascript php filepond

我设法使Filepond上传文件,将它们放在正确的文件夹中,并将必要的详细信息添加到mysql数据库中。但是,由于原始图像的分辨率很高,因此我需要制作缩略图。图片的较小版本应放在称为“缩略图”的子文件夹中。

我正在使用PHP样板,并且某些文档没有介绍那里使用的方法。例如,我只是为了进行测试而尝试执行此操作:

    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"]'));

哪个给我这个错误:

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

很明显,我可以为缩略图创建第二个Filepond-upload,但是我怀疑应该有一种自动执行此操作的方法。如何使变体起作用,如何使它们在不同的文件夹和相同的文件名中而不是给它们加上前缀?

1 个答案:

答案 0 :(得分:0)

您是否使用Doka?我认为Doka允许您设置转换客户端,然后服务器将执行转换-尽管我不确定。另一种选择是编写一个简单的php脚本为您做压缩,因为您只想真正上传一张图像。

如果您想自己执行此操作,也许可以使用以下类似的方法在服务器上压缩图像?


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');

免责声明-我尚未测试此代码