Codificando, renderizando e fazendo download de uma imagem em base64 com javascript

Fala pessoal, esta semana tive de desenvolver uma funcionalidade bem bacana no projeto que estou atuando, como achei interessante gostaria de compartilhar este conhecimento.
Então vou ensinar vocês:
– Converter uma imagem para base64
– Renderizar a imagem na sua página
– Fazer o download

Mas o que é base64?

Base64 é um método para codificação de dados para transferência na Internet (codificação MIME para transferência de conteúdo). É utilizado frequentemente para transmitir dados binários por meios de transmissão que lidam apenas com texto. Por exemplo os envios de anexos por e-mail utilizam este método.

Convertendo arquivo de imagem em base64

Primeiramente vamos escrever o código html para fazer o upload do arquivo:

<div>
   <label>Selecione uma imagem</label>
</div>
<div>
   <input type="file" accept="image/*" (change)="processar($event)">
</div>

O método processar é responsável por interpretar o arquivo de imagem que fizemos upload, então é onde iremos aproveitar para converter nosso arquivo e recuperar as informações para podermos renderizar/fazer download do mesmo:

arquivoSelecionado: string; // guardará o src da imagem para renderizar
arquivoFormatado: string; // guardará o valor codificado em base64
arquivoNome: string;
arquivoExtensao: string;

processar(event) {
    // Recuperando a imagem, por padrão vem em uma lista
    const file = event.target.files[0];

    // Recuperando o nome do arquivo e extensão
    const arquivo: string = event.target.value;

    // Removendo o path C:\fakepath\ do nome da imagem
    this.arquivoNome = arquivo.split('.')[0].slice(0, 12);
    this.arquivoExtensao = arquivo.split('.')[1];

    // Objeto responsável por interpretar um arquivo
    const reader = new FileReader();

    // Este evento é chamado cada vez que a operação de leitura é completada com sucesso
    reader.onload = this._handleReaderLoaded.bind(this);

    // Inicia a leitura do conteúdo do Blob(objeto do tipo arquivo) especificado, uma vez finalizado, o atributo result conterá os dados raw binários do arquivo como string
    reader.readAsBinaryString(file);
  }

  _handleReaderLoaded(readerEvt) {
   // o método btoa codifica em base64
   const base64 = btoa(readerEvt.target.result);
   this.arquivoFormatado = base64;

   // src para renderizar a imagem
   this.arquivoSelecionado = "data:image/jpeg;base64," + base64;
  }

Exemplo de arquivo convertido em base64:

Renderizando a imagem

Agora que já temos nosso arquivo codificado em base64, conseguimos renderizar a imagem na nossa página, utilizando a variável arquivoSelecionado.

<div class="d-flex justify-content-center">
   <img [src]="arquivoSelecionado" alt="Selected Image"/>
</div>

Fazendo download do arquivo

Primeiro vamos criar o HTML do botão:

<button type="button" class="btn m-btn--air btn-outline-primary btn-sm mr-2" (click)="download()">
   <span>Download</span>
</button>

Agora vamos para o código responsável pelo download:

download() {
    // o metodo atob decodifica base64
    const binaryString = atob(this.arquivoFormatado);
    const bytes = new Uint8Array(binaryString.length);
    // convertendo em array buffer do tipo Uint8Array
    const arrayBuffer = bytes.map((byte, i) => binaryString.charCodeAt(i));

    this.criarArquivoParaDownload(arrayBuffer);
  }

  criarArquivoParaDownload(body) {
    // A partir do array buffer criamos o arquivo para download
    const blob = new Blob([body]);
    const fileName = `${this.arquivoNome}.${this.arquivoExtensao}`;

    // Validação para navegadores
    if (navigator.msSaveBlob) {
      // IE 10+
      navigator.msSaveBlob(blob, fileName);
    } else {
      const link = document.createElement('a');
      // Navegadores que suporta atributo de download do HTML5
      if (link.download !== undefined) {
        // criando um atributo hidden, para simular o click e disparar o download
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', fileName);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }

Clicando agora no botão de Download, o arquivo será baixado pelo seu navegador!
Com isso terminamos o nosso post de hoje!
Espero que este material sirva de apoio para vocês algum dia 🙂

O que é Node.js?

Fala pessoal, hoje iremos falar um pouco sobre Node.js, já ouviram falar?
Acredito que sim! Pois a tecnologia vem dominando cada dia mais o mercado. Então vamos lá!

O que é Node.js?
Resumidamente falando, é uma plataforma utilizada para construir aplicações web escaláveis de alta performance com JavaScript.
A tecnologia foi construída com base no interpretador V8 JavaScript Engine feita nada mais, nada menos do que pela Google. A sua arquitetura é orientada a eventos ou seja, uma rotina fica monitorando até que o evento programado seja acionado assim retornando uma resposta.

Mas qual a vantagem de utilizar o Node.js?
O Node.js trabalha de forma assíncrona e sem bloqueios, o que significa que não é necessário esperar uma requisição terminar para iniciar outra. Isso é uma arma muito poderosa, pois consegue lidar com um grande volume de requisições e garante rapidez nas respostas .
A sua leveza também é um destaque, pois não é necessário grandes recursos de utilização do computador .

Node.js X NPM
NPM ( Node Package Manager ) é um repositório online para publicação de código aberto para o Node.js, e também através dele é possível instalar os pacotes contidos neste repositório.
Então por possuir um grande repositório que fornece pacotes de códigos reusáveis gratuitamente via NPM é uma outra grande vantagem do Node.js, ou seja, caso precise fazer integrações com outros sistemas e/ou banco de dados é possível que já exista a solução implementada.

Tudo isso é muito bom, mas e as desvantagens?
Por trabalhar de forma assíncrona, é preciso tomar cuidado com o famoso callback hell, que significa ter várias camadas de retorno, uma dependendo da outra, assim deixando muito complexo o entendimento para outros programadores e para manutenções de código.
Não é recomendado a utilização do Node.js, para sistemas que tem lógicas muito complexas e necessitam de uma utilização maior da CPU.

Espero que algumas dúvidas em relação a tecnologia tenha sido esclarecida!
Em breve faremos alguns tutoriais desde a instalação até a utilização da tecnologia 😉

Para mais informações: https://nodejs.org/en/



Aprender sem esquecer: utilizando técnicas de fixação e memorização

Como assim? Qual a mágica por trás de não esquecer o que aprendeu mesmo sem praticar? Seja no trabalho, idioma, um curso ou até uma receita de bolo.
Pois é, pode parecer estranho no início, mas tudo fará sentido no final. Pouco tempo atrás estava nesta exata situação onde tinha dificuldades de fixar coisas que acabei de aprender / estudar, mas devido o não exercício ou prática dentro da minha rotina eu acabava esquecendo.
Então após um insight comecei pesquisar se havia técnicas para ter um aprendizado melhor e fixar o conteúdo. E não é que existia?!

É muito normal aprendermos muitas coisas visando nossa carreira profissional, porém nem sempre conseguimos aplicar no nosso dia a dia de trabalho e acabamos esquecendo o conhecimento adquirido.

Vou fazer um breve overview sobre um curso que fiz e colocarei o link no final do post para os interessados (não ganharei comissão por isso, só estou compartilhando por ser um conteúdo muito foda!).

Então vamos lá!
Neste curso eu aprendi a forma correta de fazer anotações, saindo do tradicional com a folha na vertical e indo para horizontal, não focando em anotar palavra por palavra, mas apenas palavras chaves que funcionam como gatilho para trazer o que foi aprendido novamente. Os períodos em que devemos fazer revisões para armazena-las na memória de curto e longo prazo. E técnicas de redução de informação e memorização, algumas delas sendo: a mnemotécnica, mapas mentais e entre outras.

Vou deixar aqui um exemplo que eu achei muito legal, tente decorar a seguinte lista de palavras:
– Praia
– Mar
– Peixes
– Avião
– Nuvem
– Vendedor
– Gaivotas
– Carrinho
– Milho

Para ficar mais fácil imagine a seguinte cena em sua mente, você está na praia, olha para o mar azul, cheio de peixes pulando, quando de repente um avião surge de dentro de uma nuvem e do nada você escuta um vendedor gritando para afastar as gaivotas de seu carrinho de milho.

Não foi mais fácil se lembrar desta maneira, recordando esta cena? Pois é, a mnemotécnica é responsável por isto!

Caso tenha o interesse de fazer este curso, segue o link:
https://www.udemy.com/hiper-memoria-hiper-aprendizagem/

Espero que esse post tenha servido de alguma ajuda 🙂

Como procurar o primeiro emprego na área de TI?

Depois de entrarmos na faculdade, logo surge a vontade de ingressar na área, mas ai bate a seguinte dúvida: “onde vou encontrar um emprego sem ter a mínima experiência?”

Existem vários sites e comunidades onde vagas são postadas e é sobre isto que se trata o post de hoje, então vamos lá!

APinfowww.apinfo.com/apinfo
O APinfo é um banco de curriculum de profissionais de tecnologia, cadastre seu curriculum e pesquise por vagas que atendam seus requisitos, várias vagas são postadas diariamente!

Linkedinwww.linkedin.com
Caso não conheça o Linkedin, é uma rede social com foco profissional, onde muitos recrutadores estão presentes para captar talentos, então crie um perfil profissional!
Adicione recrutadores e pergunte se não teria uma oportunidade disponível, não tenha vergonha.

GeekHunterwww.geekhunter.com.br
A Geek Hunter é uma plataforma especialista em match de desenvolvedores x empresas. Possui uma interface bem moderna e vem com várias ideias legais, também possuem testes técnicos para os candidatos comprovarem seu nível de conhecimento assim facilitando a busca para os recrutadores,
a sacada é muito boa, pois mesmo não tendo experiência é possível comprovar o seu conhecimento .

StackOverflowwww.stackoverflow.com/jobs
O StackOverflow além de ser uma das maiores comunidades de perguntas e respostas, possui uma área para divulgação de vagas, desde vagas nacionais e internacionais! Vale a pena dar uma conferida 😉

Seja cara de pau e peça indicações! Seja para seu professor de faculdade ou um amigo que está trabalhando e pergunte se eles não sabem de alguma vaga. Participe de hackathons e eventos de TI para fazer networking e caso sua faculdade participe da maratona SBC de programação, caia de cabeça pois é uma grande oportunidade para ganhar visibilidade.

Fique de olho nas grandes empresas, pois muitas aderem aos programas de trainee, então não deixe de perder o período de inscrições.

Por último, estude e procure fazer cursos por fora, porém não faça qualquer curso, procure feedbacks sobre os instrutores e o conteúdo do curso. O conhecimento / experiência não se limita apenas ao que é te fornecido durante o período de trabalho. Há muitos profissionais certificados que não sabem fazer uma linha de código na prática, assim como há muitos arquitetos que nem faculdade fizeram. Aproveite as ferramentas e material que hoje estão para te ajudar e faça a diferença!

Lembrem-se as oportunidades só aparecem para quem corre atrás!

Como se destacar no meio de tantos profissionais?

O mercado hoje está muito competitivo, então como fazer para se destacar? Ainda mais quando estamos no começo de nossas carreiras?

Eu vou lhe dizer jovem padawan o segredo está no foco e na força de vontade, blah, mas isso todos nós já sabemos…
Pois é, todos sabemos mas não fazemos na prática!

Estudar é fundamental para conseguir crescer em sua carreira profissional, porém hoje temos acesso a MUITO conteúdo facilmente na internet, o que muitas vezes pode acabar se tornando um problema. Pois queremos aprender de tudo um pouco e acabamos aprendo é nada de tudo!
Então quando decidimos estudar alguma coisa, temos de focar em aprender muito bem o básico antes de querer ir para o avançado. Lembre-se:
“Antes um básico bem feito, do que um avançado mal feito.”

Então defina metas, somente após atingi-las vá para a próxima, ou caso tenha começado um curso, termine antes de começar outro, senão você estará sempre se auto sabotando e aprenderá as coisas por incompleto!

Seja pró ativo, não espere que as pessoas lhe peçam para fazer algo, tome iniciativa e comece por conta própria, caso não tenha o que fazer, foque em se aprimorar, use o tempo que tem a seu favor, estude!

Outra coisa que lhe trará bons resultados é, sempre que possível, entregue mais do que é esperado, segue uma analogia sobre o clássico caso do estagiário que serve o café:
Não seja somente o estagiário que serve o café, seja o estagiário que serve o café e oferece açúcar ou adoçante!
A analogia é bem boba, porém é muito verdadeira, são pequenas coisas que fazem você se destacar entre os demais, pois você está entregando algo que os demais não, reflita!

Espero ter ajudado com estas dicas 🙂
Forte abraço!

Não tenha medo e nem vergonha de perguntar!

Uma coisa que acontece muito no dia a dia de trabalho é ter dúvidas, quando começamos a trabalhar na área tudo é novo e assim muitas dúvidas irão surgir.
Porém muitas pessoas no começo tem medo ou vergonha de tirar suas dúvidas achando que é uma coisa muito boba ou sem importância ou por achar que tem um cargo muito baixo vão ignorá-las ou repreendê-las, ainda mais quando é necessário perguntar aos colegas de trabalho com mais experiência.

Tire este pensamento da cabeça, pois todos sabem que você está começando e não se importarão em sanar suas dúvidas! (a não ser que a pessoa a quem você está perguntando seja babaca, mas ai já não é problema seu)
Caso não tenha entendido a explicação, seja sincero, diga que não entendeu e pergunte se não teria como explicar de outra forma, tenho certeza que não se importarão de explicar de uma forma diferente.
Por mais que procure uma solução na internet, confirme se é isto mesmo, pois talvez aquela solução não se aplique ao seu propósito.
Então não tenha medo ou vergonha de perguntar, pois guardar isso para você pode acabar te levando a tomar decisões erradas que pode impactar o resto da sua equipe ou projeto.

Dicas de ouro!

Sempre preste o máximo de atenção no que a pessoa está explicando, afinal, ela está cedendo o tempo dela para sanar sua dúvida!
E convenhamos, é muito chato ter que explicar a mesma coisa duas, três ou quatro vezes para mesma pessoa, por ela não ter prestado atenção.

Ande sempre com um bloco de anotações, um caderno ou crie um arquivo no word, onde você possa anotar suas dúvidas e as soluções, assim sempre podendo consultar futuramente!
Quando comecei, fazia anotações no caderno e sempre consultava quando necessário, assim não precisava ficar tomando o tempo de outras pessoas para tirar dúvidas anteriores.

Por hoje é isto pessoal, forte abraço!

Fique Ligado!

Fala pessoal!

Sejam bem vindos ao DNC on the Web!
Mas o que raios significa DNC?
Longa história…

Mas pode ter certeza que contaremos a engraçada história por trás do nome futuramente.

Voltando ao assunto principal!
Criamos este blog com foco no pessoal que está ingressando na área de TI (para os leigos Tecnologia da Informação), então se você está na faculdade ou atua a pouco tempo no mercado, vamos dar várias dicas com intuito de ajudar nesta etapa inicial!
Desde mindset de crescimento, dicas de programação e tecnologias, comentaremos sobre o que está bombando no mercado atualmente e as tendências.

Com isso esperamos ajudar o máximo de pessoas a ingressar na área e alavancar na sua carreira!

DNC and be happy!