Como redimensionar uma imagem no Angular ou no Node?

Front-end
#1

Saudação para todos, estou desenvolvendo um sistema de vendas online, não estou tendo problemas em salvar a imagem, mas estou tendo problemas ao salvar a imagem e redimensionar-la, pois existe duas alternativas fazer isso, a primeira seria ao salvar a imagem, o sistema redimensiona a imagem antes de enviar-la para pasta, e a segunda alternativa seria salva a imagem sem redimensionar-la e usar alguma lib de CSS para redimensionar-la quando fosse projetada em tela.

Alguém tem uma sugestão para me ajudar?

#2

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.

#3

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?

#4

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

#5

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.

#6

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.

#7

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…

1 curtida
#8

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.

#9

Por favor, você poderia me indicar esse plugins?

#10

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

#11

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

#12

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

#13 
ERROR Error: Uncaught (in promise): ReferenceError: EXIF is not defined
ReferenceError: EXIF is not defined
    at img-exif.service.ts:11
    at new ZoneAwarePromise (zone.js:776)
    at ImgExifService.webpackJsonp.../../../../../src/app/admin/ng2-img-max/img-exif.service.ts.ImgExifService.getOrientedImage (img-exif.service.ts:8)
    at Image.img.onload (img-maxpx-size.service.ts:25)
    at Image.wrapFn [as __zone_symbol___onload] (zone.js:1393)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4136)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:397)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:165)
    at Image.ZoneTask.invoke (zone.js:460)
    at img-exif.service.ts:11
    at new ZoneAwarePromise (zone.js:776)
    at ImgExifService.webpackJsonp.../../../../../src/app/admin/ng2-img-max/img-exif.service.ts.ImgExifService.getOrientedImage (img-exif.service.ts:8)
    at Image.img.onload (img-maxpx-size.service.ts:25)
    at Image.wrapFn [as __zone_symbol___onload] (zone.js:1393)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4136)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:397)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:165)
    at Image.ZoneTask.invoke (zone.js:460)
    at resolvePromise (zone.js:683) [angular]
    at :4200/polyfills.bundle.js:6444:17 [angular]
    at Object.onInvokeTask (core.es5.js:4136) [angular]
1 curtida
#14

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

npm install ng2-img-max@2.1.6

#15

Deu o mesmo problema :frowning:

#16

Rapaz problema mesmo vou ver outra lib e te passo

1 curtida
#17

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

#18

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/