Filepond 网格布局与图像调整大小冲突
Filepond gridlayout conflicting with image resize
既然我正在使用文件池,我想缩放照片以填充目标尺寸,除非它们的尺寸各不相同,这就是我添加图像调整大小功能的原因。它的图像调整大小功能有效。但是当我使用网格布局并排显示图片时,图像调整大小功能不起作用。
.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>
.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>
既然我正在使用文件池,我想缩放照片以填充目标尺寸,除非它们的尺寸各不相同,这就是我添加图像调整大小功能的原因。它的图像调整大小功能有效。但是当我使用网格布局并排显示图片时,图像调整大小功能不起作用。
.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>
.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>