Na minha experiência, este exemplo foi a melhor solução para carregar uma imagem redimensionada: https://zocada.com/compress-resize-images-javascript-browser/
Ele usa o recurso Canvas do HTML5.
O código é tão 'simples' como este:
compress(e) {
const fileName = e.target.files[0].name;
const reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = event => {
const img = new Image();
img.src = event.target.result;
img.onload = () => {
const elem = document.createElement('canvas');
const width = Math.min(800, img.width);
const scaleFactor = width / img.width;
elem.width = width;
elem.height = img.height * scaleFactor;
const ctx = elem.getContext('2d');
// img.width and img.height will contain the original dimensions
ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
ctx.canvas.toBlob((blob) => {
const file = new File([blob], fileName, {
type: 'image/jpeg',
lastModified: Date.now()
});
}, 'image/jpeg', 1);
},
reader.onerror = error => console.log(error);
};
}
Há apenas uma desvantagem nessa opção, e está relacionada à rotação da imagem, devido à ignorância dos dados EXIF. No qual estou trabalhando no momento. Será atualizado depois que eu terminar com isso.
Outra desvantagem é a falta de suporte ao IE / Edge, no qual estou trabalhando também. Embora haja informações no link acima. Para ambos os problemas.