0
280
VisualizaçõesEl diseño de cuadrícula de Filepond está en conflicto con el cambio de tamaño de la imagen
Ahora que estoy usando el estanque de archivos, me gustaría escalar las fotos para llenar las dimensiones de destino a menos que sean de varios tamaños, razón por la cual agregué la función de cambio de tamaño de imagen. Su función de cambio de tamaño de imagen funciona. Sin embargo, la función de cambio de tamaño de imagen no funciona cuando uso el diseño de cuadrícula para mostrar las imágenes una al lado de la otra.
.filepond--root { max-width:30em; } .filepond--item { width: calc(50% - 0.5em); } body { padding: 2em; } img { margin: 1em 2em 0 0; border-radius: .25em; box-shadow: 0 .125em .5em rgba(0,0,0,0.25); } <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet"> <input type="file" class="filepond" accept="image/*" name="filepond" multiple data-max-file-size="3MB" data-max-files="6"/> <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.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-preview/dist/filepond-plugin-image-preview.js"></script> <script src="https://unpkg.com/filepond/dist/filepond.js"></script> <script> FilePond.registerPlugin( FilePondPluginImageResize, FilePondPluginFileValidateType, FilePondPluginImagePreview ); const inputElement = document.querySelector('input[type="file"]'); const pond = FilePond.create(inputElement, { imageCropAspectRatio: 1, imageResizeTargetWidth: 256, imageResizeMode: 'contain' }); </script> 
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
.filepond--root { max-width:20em; } .filepond--item { width: calc(50% - 0.5em); } body { padding: 2em; } img { margin: 1em 2em 0 0; border-radius: .25em; box-shadow: 0 .125em .5em rgba(0,0,0,.25); } <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet"> <input type="file" accept="image/*" class="filepond" name="filepond" multiple data-max-file-size="2MB" data-max-files="6"/> <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.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-crop/dist/filepond-plugin-image-crop.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/dist/filepond.js"></script> <script> FilePond.registerPlugin( FilePondPluginImageCrop, FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginFileValidateType ); const inputElement = document.querySelector('input[type="file"]'); const pond = FilePond.create(inputElement, { imageCropAspectRatio: 1, imageResizeTargetWidth: 256, imageResizeMode: 'contain', onaddfile: (err, fileItem) => { console.log(err, fileItem.getMetadata('resize')); }, onpreparefile: (fileItem, outputFiles) => { outputFiles.forEach(output => { const img = new Image(); img.src = URL.createObjectURL(output.file); document.body.appendChild(img); }) } }); </script>
·
Juan Pablo Isaza
Relatório
Responde à pergunta