У меня есть ввод типа файла со свойством множественного выбора. Когда пользователь выбирает файл, я сжимаю файлы с помощью функции JavaScript. Теперь я хотел изменить длину и ширину изображений с помощью этой функции. Что мне для этого добавить в функцию?
Моя функция выглядит следующим образом
const compressImage = async (file, { quality = 1, type = file.type }) => {
// Get as image data
const imageBitmap = await createImageBitmap(file);
// Draw to canvas
const canvas = document.createElement('canvas');
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(imageBitmap, 0, 0);
// Turn into Blob
const blob = await new Promise((resolve) =>
canvas.toBlob(resolve, type, quality)
);
// Turn Blob into File
return new File([blob], file.name, {
type: blob.type,
});
};
// Get the selected file from the file input
const input = document.querySelector('.my-image-field');
input.addEventListener('change', async (e) => {
// Get the files
const { files } = e.target;
// No files selected
if (!files.length) return;
// We'll store the files in this data transfer object
const dataTransfer = new DataTransfer();
// For every file in the files list
for (const file of files) {
// We don't have to compress files that aren't images
if (!file.type.startsWith('image')) {
// Ignore this file, but do add it to our result
dataTransfer.items.add(file);
continue;
}
// We compress the file by 50%
const compressedFile = await compressImage(file, {
quality: 0.3,
type: 'image/jpeg',
});
// Save back the compressed file instead of the original file
dataTransfer.items.add(compressedFile);
}
// Set value of the file input to our new files list
e.target.files = dataTransfer.files;
});
У меня есть ввод типа файла со свойством множественного выбора. Когда пользователь выбирает файл, я сжимаю файлы с помощью функции JavaScript. Теперь я хотел изменить длину и ширину изображений с помощью этой функции. Что мне для этого добавить в функцию? Моя функция выглядит следующим образом
< div class="snippet-code"> [code] const compressImage = async (file, { quality = 1, type = file.type }) => { // Get as image data const imageBitmap = await createImageBitmap(file);
// Turn into Blob const blob = await new Promise((resolve) => canvas.toBlob(resolve, type, quality) );
// Turn Blob into File return new File([blob], file.name, { type: blob.type, }); };
// Get the selected file from the file input const input = document.querySelector('.my-image-field'); input.addEventListener('change', async (e) => { // Get the files const { files } = e.target;
// No files selected if (!files.length) return;
// We'll store the files in this data transfer object const dataTransfer = new DataTransfer();
// For every file in the files list for (const file of files) { // We don't have to compress files that aren't images if (!file.type.startsWith('image')) { // Ignore this file, but do add it to our result dataTransfer.items.add(file); continue; }
// We compress the file by 50% const compressedFile = await compressImage(file, { quality: 0.3, type: 'image/jpeg', });
// Save back the compressed file instead of the original file dataTransfer.items.add(compressedFile); }
// Set value of the file input to our new files list e.target.files = dataTransfer.files; });[/code]