Como redimensionar uma imagem no Angular ou no Node?

Sua questao nao está muito clara. No geral pra redimensionar uma imagem use a propriedade width ou height do CSS, nunca as duas ao mesmo tempo para manter a proporcao. Se quer trafegar no tamanho necessário ai é outra história, terá que redimensionar no servidor.

Estou salvando a imagem no back-end, o objetivo seria pegar uma imagem de 1000 x 300 para redimensionar-la para 450 x 280, gostaria de realizar essa operação usando o front-end, pois se eu colocar essa implementação no back-end vai terminar ficando para todo o projeto, porém se eu implementar-la no front-end ai poderei escolher as partes do projeto que terão a implementação, pois terão partes do projeto que será salvo em resoluções diferente.
Por isso não gostaria de deixar fixo a implementação no back-end.

Um exemplo, o redimensionamento de uma imagem do logo do usuário é diferente do redimensionamento de uma imagem de um produto que será colocando para vender, se eu colocar o redimensionamento fixo no back-end terei que criar vários métodos no back-end para salvar imagens deixando o código poluído.
Entende?

Pegaria uma imagem de 1000 x 300 e salvaria ela no servidor com 450 x 280.

No back-end poupará banda, nada impede de ter serviços diferentes ou parametro para atender o caso que vá ser a versao redimensionada e o outro nao. No front-end já te expliquei como faz.

Eu já tentei fazer do que você sugeriu, o que aconteceu foi que eu salvei a imagem como ela estava original e quando fui tentar colocar-la em tela, ela simplesmente estourou!

Como assim estourou? eu peguei uma imagem de 1000 x 300 que era uma foto de um barco no mar e coloquei numa resolução de 450 x 280, ela somente apareceu um pedaço do mar, ficou tudo azul, para aparecer a imagem toda precisaria antes de salvar redimensionar-la para o tamanho certo ou se existir um recurso de css ou Javascript que possar redimensionar.

Mas eu não conheço um recurso de front-end que faça isso, é por isso que estou pedindo ajuda, eu até sei fazer o redimensionamento pelo back-end, mas preferiria fazer no front-end.

Vamos por parte

Quem faz um foto ser redimensionada é na programação do servidor ou backend, o frontend não manipula isso ele simplesmente mostra, até pode colocar efeitos e tudo mais para fazer isso, mas, é no backend que tudo acontece, e deve ser implementado lá. Se precisa que alguns momentos isso acontece e em outros não, é só programar alguma flag para que isso acontece em determinados casos.

Não ficou claro qual é o seu backend, programação e tudo mais, precisa relatar isso, existe também alguns plugins para redimensionar a foto na tela e mandar o backend manipular com os dados obtidos de coordenadas…

eu tentei usando esse tutorial https://alligator.io/angular/resizing-images-in-browser-ng2-img-max/

Mas não tive sucesso, foi só dor de cabeça.

Por favor, você poderia me indicar esse plugins?

Esse plugin é fera, me diz uma coisa qual é o seu backend? e o que não deu certo.!

Estou usando Node Express no back-end.

Essa implementação foi no front-end e usei esse método abaixo

uploadedImage: File;

constructor(private ng2ImgMax: Ng2ImgMaxService) {}

onImageChange(event) {
  let image = event.target.files[0];

  this.ng2ImgMax.resizeImage(image, 400, 300).subscribe(
    result => {
      this.uploadedImage = new File([result], result.name);
    },
    error => {
      console.log('😢 Oh no!', error);
    }
  );
}

Os processos de salvar a imagem tem que primeiro escolher a imagem e depois clicar no botão para submeter, ao escolher a imagem ele gerou esse erro;

ReferenceError: EXIF is not defined

Esse erro é porque ele deu algum problema no recurso resizeImage.

E utilizei esses serviços para completar a implementação do ng2-img-max

Esse componente tem um bug, me parece algo de abrir um issue e mandar a mensagem de erro

@wladyband faz a instalação assim quem é a versão que está funcioando:

npm install [email protected]

Deu o mesmo problema

Rapaz problema mesmo vou ver outra lib e te passo

Meu projeto está na ultima etapa de conclusão, e a implementação de upload e download de imagem está funcionando perfeitamente, o problema é que quando vou instalar a lib express-processimage a minha lib que já estava instalado e funcionando perfeitamente como connect-multiparty deixa de funcionar, o erro que aparece é que ele não consegue encontrar o connect-multiparty, é como se estivesse desinstalado.

O que fiz para contornar esse problema foi tentar desinstalar o express-processimage, porém não tive sucesso na desinstalação, minha ulta tentativa foi apagar o arquivo package-lock.json e a pasta node_modules e tirar manualmente a referencia do express-processimage do arquivo package.json e efetuar o npm install, porém não tive sucesso também, o jeito foi ter que voltar a versão anterior com um programa de versionamento, e voltou ao normal.

Eu gostaria de saber se a lib express-processimage tem incompartibilidade com a lib connect-multiparty ou é por que instalei errado a lib express-processimage?

se instalei errado como seria a forma correta de instalação?

Estou seguindo essa documentação

O objetivo dessa lib é ao colocar a URL ele irá redimensionar a imagem como no exemplo abaixo, se a imagem for de 1000 x 300 ele irá redimensionar a imagem para 400 x 280 aproximadamente;

http://localhost:1337/bigImage.png?resize=400

A instalação é simples, eu executei o seguinte comando

npm install -S express-processimage --save

em seguida configurei meu projeto incluindo essas linhas de código no meu arquivo app.js.

processImage = require('express-processimage');

app.use(processImage('public'));

Sem o código fica mais difícil tentar resolver o problema. Como falei vai gastar mais banda, mas se quer somente diminuir visualmente no front/navegador, um exemplo do que te expliquei: https://jsfiddle.net/euLjnmyp/