0

我只是想通过 FilePondPluginFileEncode 单击按钮通过表单上传图像。我已经实现了我想要的，但是当我使用 HEIC 图像时出现了问题。问题是当库对 HEIC 图像进行编码时，它会将它们转换为永无止境的编码字符串。我试图以某种方式调整它的大小，但调整大小插件适用于其他图像类型，但不适用于 HEIC 图像。我的图像仍然是 2.75 MB，这对于图像来说太大了。知道如何处理 FilePondPluginFileEncode 上的 HEIC 图像大小吗？你能告诉我如何简单地调整我的 HEIC 图像的大小。就像我以 MB 为单位上传图像一样，它应该以 KB 为单位上传文件

以下是我的代码。

<?php if (isset($_POST["submit"])) {
    $files = $_POST['file'];
    $file_count = sizeof($files);
    if ($file_count > 0) {
    for ($i=0; $i < $file_count ; $i++) { 
    $image_object = stripslashes($files[$i]);
    $image_detail = json_decode($image_object, true);
    $image_code = $image_detail["id"];
    $image_name = $image_detail["name"];
    $file_name = $image_code."_".$image_name;
    $image = base64_decode($image_detail["data"]);
    file_put_contents('uploads/'.$file_name, $image);
    }
    }
    }
    
    ?>
    
    <form action="" method="post" enctype="multipart/form-data">
        
    <input type="file" name="file[]" multiple>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <button name="submit">Submit</button>
    
    </form>
    
    <link rel='stylesheet' href='https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css' />
    <link rel='stylesheet' href='https://unpkg.com/filepond/dist/filepond.min.css' />
    
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
    <script src='https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js'></script>
    <script src='https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js'></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script src='https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js'></script>
    <script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
    <script src='https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js'></script>
    <script src='https://unpkg.com/filepond/dist/filepond.min.js'></script>
    
    
    <script>
        
    $(document).ready(function(){
        FilePond.registerPlugin(
        FilePondPluginFileEncode,
        FilePondPluginFileValidateSize,
        FilePondPluginFileValidateType,
        FilePondPluginImageExifOrientation,
        FilePondPluginImageCrop,
        FilePondPluginImageResize,
        FilePondPluginImageTransform,
        FilePondPluginImagePreview
        );
        FilePond.create( document.querySelector('input[type="file"]'), { 
        allowMultiple: true,
        allowReorder: true,
        allowFileEncode: true,
        maxFiles:5,
        maxParallelUploads:5,
        instantUpload:false,
        acceptedFileTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/heic', 'application/pdf'],
        fileValidateTypeDetectType: validateType,
        imageResizeTargetWidth: false,
        imageResizeMode: 'cover',
        imageCropAspectRatio: "1:1",
        credits: false,
        imageTransformOutputQuality: 40,
        imageTransformOutputMimeType: 'image/jpeg'
        });
        });
    
    function validateType(source, type) {
      const p = new Promise((resolve, reject) => {
        if (source.name.toLowerCase().indexOf('.heic') !== -1) {
          resolve('image/heic')
        } else {
          resolve(type)
        }
      })
    
      return p
    }
    
    </script>
4

0 回答 0