Изменение размера изображений с помощью JavaScriptJquery

Программирование на jquery
Ответить
Anonymous
 Изменение размера изображений с помощью JavaScript

Сообщение Anonymous »

У меня есть ввод типа файла со свойством множественного выбора. Когда пользователь выбирает файл, я сжимаю файлы с помощью функции JavaScript. Теперь я хотел изменить длину и ширину изображений с помощью этой функции. Что мне для этого добавить в функцию?
Моя функция выглядит следующим образом

< div class="snippet-code">

Код: Выделить всё

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



Подробнее здесь: https://stackoverflow.com/questions/783 ... javascript
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»