Diversão com Javascript: crie um aplicativo de efeitos para fotos!

1. Boas-vindas ao curso!: Ei, bem-vindo a esta aula. Se você é um iniciante de desenvolvimento web e quer apenas entrar e construir alguns projetos divertidos, você veio ao lugar certo. A idéia por trás desta série é mostrar o que você pode fazer com HTML normal, CSS e JavaScript. Não estou confundindo nenhuma estrutura, nenhuma placa, nenhuma biblioteca ou qualquer modelo. Em vez disso, vamos construir tudo completamente do zero, passo a passo para mostrar como essas tecnologias gratuitas funcionam juntas. Com este projeto vamos criar um aplicativo de efeitos fotográficos. Vai envolver a criação um carregador de fotos onde podemos selecionar a imagem do nosso computador. Eu seleciono um aqui, e assim que abrirmos isso, este arquivo será exibido dentro do navegador. Esta é a imagem original e, em seguida, à direita temos algumas opções para alterar o efeito. Podemos mudar isso para ser tons de cinza. Podemos adicionar coisas como um efeito sépia. Podemos inverter as cores. As imagens são compostas de pixels que são valores vermelhos, verdes e azuis. Também temos algumas opções para alternar a ordem dessas cores. Isso nos dá algum efeito de aparência agradável, que pode realmente mudar a aparência de nossas imagens. Uma vez que terminamos e temos uma imagem bonita que você deseja usar, também podemos baixar esta imagem também. Este projeto lhe dará a chance de aprender muitas coisas novas. Vamos criar uma interface de usuário com HTML. Em seguida, adicionaremos estilo com CSS. Mas o foco principal neste vídeo vai ser o JavaScript, e também trabalhar com pixels. Você aprenderá a fazer upload de imagens, criar objetos de leitura de arquivos, como desenhar para a tela HTML. Então, uma vez que tenhamos essa imagem na tela, você aprenderá a ler todos os pixels desta imagem. Em seguida, percorreremos todos esses pixels e aplicaremos vários efeitos. Também aprenderemos como restabelecer a imagem original e também baixar a versão modificada. Se isso soa muito complexo, não se preocupe. Este curso é projetado para iniciantes. No entanto, pouco conhecimento JavaScript seria uma vantagem real, e idealmente este deve ser o quinto projeto que você tira deste JavaScript da série. Todos os outros projetos também estão disponíveis aqui no Skillshare. Seria muito vantajoso tomar essas aulas em ordem. Espero que você esteja animado para construir esses efeitos fotográficos e eu vou te ver dentro da aula. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para marcar o final de uma palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder e se afastar da aula, e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto posteriormente. Isso realmente lhe dará uma boa chance de praticar o que aprendeu na aula. Além disso, lembre-se de compartilhar seu projeto também aqui no Skillshare, e só vou dar uma olhada , mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma acesse a guia Projeto e Recursos, onde você não pode apenas fazer o upload do seu projeto, mas também pode ver outros projetos de classe. Com isso em mente, espero ver o que você cria e carrega aqui no Skillshare. 3. Criando a interface de usuário: Bem-vindo ao nosso próximo projeto, que é o aplicativo de efeitos fotográficos. A interface do usuário será relativamente simples, especialmente em comparação com alguns dos outros projetos. Tudo o que vamos fazer é criar uma barra lateral no lado direito. Isto vai ter uma série de botões que vão criar um efeito sobre uma foto que está sendo carregada. Podemos ir em frente e selecionar o arquivo, escolher uma imagem, e então isso irá exibir isso dentro do navegador. Em seguida, tenha uma série de efeitos. Podemos fazer disso um efeito em tons de cinza. Podemos limpar esses efeitos. Temos invertido, temos o efeito sépia, e então temos uma série de botões, que vai mudar em torno de nossos valores vermelho, verde e azul. Isto vai dar-nos alguns efeitos diferentes, como este. Isto vai dar-nos uma sombra mais vermelha. Um efeito que isso tem vai ser bem diferente em cada imagem. Para fazer isso, vamos trocar em torno de todos os pixels da imagem para nos dar esses efeitos bonitos. Também temos a facilidade de baixar esta imagem. Podemos clicar neste botão. Isso fará o download da imagem para usarmos. Como em qualquer um dos projetos deste curso, você pode usar uma imagem de sua escolha. Ou se você quiser usar a mesma imagem que eu usei para este projeto, vá para o repositório do GitHub e, em seguida, você pode ir para o aplicativo Photo Effects, onde você verá não apenas o código de exemplo uma vez que este seja carregado, mas também a imagem que estou usando durante este curso. Para começar, vou baixar isso. Clique no nome da imagem, clique em “Download”. Podemos então clicar com o botão direito do mouse, “Salvar” nossa imagem. Vou guardar isto na área de trabalho. Também precisamos de uma pasta de projeto. Vamos voltar para a nossa área de trabalho, New Folder, que vai ser os efeitos fotográficos. Arraste isto para o nosso Visual Studio Code e, em seguida, vamos certificar-nos nossa imagem está disponível dentro da pasta do nosso projeto. Vamos arrastar isso e soltar isso em nossa pasta do projeto. O primeiro passo será criar um novo arquivo, que é para a nossa página de índice. Este vai ser o index.html. Podemos então abrir isso no navegador, copiar o caminho para isso, colar isso, e estamos prontos para ir. Vamos começar com a nossa estrutura HTML. Como sempre, vou usar o comando html:5, que é incorporado ao Visual Studio Code. O título do documento é o aplicativo de efeitos fotográficos. Então, dentro do corpo, vamos cercar toda a área da foto dentro do elemento principal. Então teremos a seção de lado, que será a nossa barra lateral. Isto é para todos os nossos botões e para o upload de imagens. A secção principal vai ser bastante simples. Esta é simplesmente a área que vai exibir nossa imagem dentro do navegador. A maneira como vamos fazer isso é criando um elemento de tela. Uma tela é um elemento HTML que usaremos para desenhar nossas imagens. Ele pode ser usado para desenhar quase qualquer tipo de gráficos de linhas e formas, fotos, frutos maduros, complexos, objetos 3D, embora neste curso só vamos acessar os recursos 2D, mais especificamente o contexto 2D e nós vai dar uma olhada nisso com mais detalhes no JavaScript. Precisamos criar um elemento de tela e, em seguida, um ID que vai ser tela também. Isto é apenas para que possamos selecionar este elemento em nosso JavaScript, e então podemos desenhar nossas imagens. Em seguida, a seção de lado, que vai conter nosso uploader e nossos botões. A primeira seção vai ser uma div com a classe de input-wrapper. Esta vai ser a seção que vai ter nosso rótulo e também o uploader de arquivos. O rótulo para esta entrada terá um ID de uploader e, em seguida, o texto do arquivo select. Depois disso, uma entrada, eo tipo de entrada para isso vai ser arquivo com o ID do uploader. Podemos então usar isso dentro de nosso JavaScript e isso também corresponde ao nosso rótulo logo acima. Em seguida, após o nosso wrapper de entrada, podemos criar uma segunda div. Esta div vai ter a classe de efeitos. Esta será a área onde selecionamos todos os efeitos usando esses botões. O primeiro botão, isso vai acionar o efeito de escala de cinza. O segundo botão, isto é para o efeito sépia. O terceiro vai ser invertido. O quarto, este vai ser o início dos quatro botões, que vamos alternar em torno de nossos valores vermelho, verde e azul. O primeiro vai converter o vermelho, verde e azul para vermelho, azul e verde. Vamos duplicar isso para criar quatro botões. Vamos sempre começar com a cor RGB. O lado esquerdo será sempre o mesmo. No entanto, para o segundo botão, isso vai ser trocado para ser azul, verde e vermelho. O próximo será verde, azul e vermelho. A quarta combinação que vamos usar é verde, vermelho e depois azul. Se essa combinação de cores que estou trocando não faz sentido no momento, tudo bem. Tudo isso se tornará mais claro quando dermos uma olhada em pixels na seção JavaScript. Depois de nossa seção de efeitos, vamos criar uma nova div. Esta div vai ter a classe de controles e isso vai ter o nosso claro e também nossos botões de download. O primeiro é claro e o segundo é para que nosso usuário possa baixar esta imagem. Dê um salvamento ou podemos até abrir isso com nosso servidor ao vivo se você optar por usá-lo durante este projeto. Vamos abrir isto. Vá para View and the Command Palette, onde podemos dar uma olhada nosso servidor ao vivo e podemos abrir isso com nossa extensão de servidor ao vivo. Agora, dentro do navegador, temos um aplicativo de aparência muito terrível, mas todo o conteúdo está no lugar. Vamos estilizá-lo no próximo vídeo. 4. Estilizando com CSS: Tudo bem, pois este projeto vai ser bastante simples. Vamos apenas criar uma cor de fundo e, em seguida, adicionar algumas cores aos nossos botões, juntamente com algum layout responsivo. Uma vez que o estilo é bastante simples, eu vou apenas começar isso sobre o topo da nossa página de índice. Apenas dentro da seção de cabeça, podemos criar a seção de estilo, e se você quiser manter isso separado e coloca em uma folha de estilo separada. O html vai ser usado para definir o tamanho da fonte base de 10 pixels. A seção do corpo, tudo o que vamos fazer aqui é definir uma cor de fundo, e então vamos criar nosso layout responsivo. Vamos usar o flexbox. Em seguida, nas telas menores, vamos definir nossa barra lateral e nossa seção principal para ser o tipo de exibição da coluna. Então vamos mudar isso nas telas maiores para ser o tipo de linha. Primeiro de tudo, a cor de fundo, que eu vou usar como um valor rgb. A cor vermelha será 48 e 47 para o valor verde, e o mesmo para o azul. O tipo de exibição vai ser o flexbox e podemos mudar a direção flexível para ser coluna. Não vemos muita diferença na lâmpada de minuto. Vamos separar essas duas seções fazendo a seção principal três vezes maior que a barra lateral. Vamos tornar isto um pouco mais amplo. Pode novamente aproveitar a flexbox e definir a seção principal para ter um valor flexível de três. Para fazer isso funcionar, também precisamos definir a seção lateral. Isso vai ter um valor flexível de um. Para recarregar, não vemos nenhum efeito na página. Isso está ocorrendo porque temos a direção flexível definida para coluna. Para fazer isso funcionar mais nas telas maiores, precisamos adicionar uma consulta de mídia para alterar a direção flexível para voltar à linha. Vamos adicionar @media. Onde podemos definir nossa largura mínima para ser um valor de nossa escolha. Eu vou para um valor que vai ser 1.000 pixels. A única coisa que precisamos fazer aqui dentro é direcionar nossa seção do corpo, e então mudar a direção flexível para ser linha ou para o navegador. Agora, se tornarmos isso um pouco maior, vemos o valor flexível de três. Para a nossa seção principal, apenas a barra lateral tem um valor flexível de um, que significa que é um terço do tamanho. Reduzindo isso para 1.000 pixels ou abaixo retornará nossas direções flexíveis para voltar à coluna para nossa tela menor. Para a barra lateral na visão maior, nós também vamos adicionar apenas uma pequena margem no lado esquerdo para nos dar algum espaço de nossa imagem. A seção de lados, podemos definir a margem à esquerda de 0.5rems. Então vamos começar a trabalhar com esses botões. Os botões são para todos os nossos efeitos e também para os botões claros e de download. O fundo será um valor rgb de 21, 20 e 20. Vamos fazer isso um pouco maior com um pouco de estofamento. Assim, 1.6rems no topo, zero à direita manterá isso consistente com o topo e 1.6rems na parte inferior e, em seguida, adicionar 2rems no lado esquerdo, que vai nos dar algum espaçamento da esquerda do fundo. O tamanho da fonte de 1.6rems, que é 16 pixels. O cursor vai ser definido como um ponteiro, quando o usuário passa o mouse sobre qualquer um desses botões. A cor para que possamos ver o texto. Isso vai ser um valor rgb. O vermelho é 212, 210 para o verde e o valor azul de 210. Dado o nosso texto cores mais claras, por isso se destaca mais. Também podemos remover essa borda padrão definindo isso como um valor de none. Então podemos usar nossa própria borda na parte inferior para nos dar uma linha branca entre cada um desses botões. Esta linha branca vai ter um pixel de largura e uma cor sólida. Em seguida, vamos adicionar um efeito de focagem aos nossos botões. Fazemos isso com o estado flutuante. Tudo o que precisamos fazer aqui é dar uma ligeira mudança na cor de fundo. O valor que vou buscar é um valor rgb de 50, 47 e 47. Vamos tentar isto. Isso é tudo bom. Agora vamos colocar todos esses botões em suas próprias linhas. Isso é relativamente simples tudo o que precisamos fazer é direcionar nossa classe de efeitos, que é o wrapper div para todos esses botões para baixo em nosso HTML. Vamos mirar nossos efeitos. Precisamos definir o tipo de exibição para ser flexível. Em seguida, para fazer estes verticais, podemos definir a direção flexível para ser coluna. Abaixo nossos controles, que são o botão Limpar e o botão Download. Vamos garantir que cada um desses botões ocupe metade da largura do espaço disponível. Novamente, vamos fazer uso do tipo de exibição de flex, e então podemos direcionar cada um de nossos botões, que estão aninhados dentro desta seção de controle. Se definir o flex para ser um valor de um, isso vai certificar-se de que cada um de nossos botões dentro da seção vai tomar quantidades iguais de espaço aberto. Ainda temos uma prancha na parte inferior para que possamos remover isto sem border-bottom nenhum. Se nós rolarmos para cima, a próxima coisa que vamos fazer é mover todos os textos, esses botões para estar sobre a esquerda. Podemos fazer isso definindo o alinhamento de texto para ser deixado. Então, para nossos dois botões na parte inferior, podemos restabelecer isso definindo isso para ser um alinhamento de texto e para ser o centro. Também podemos remover os valores de preenchimento para este botão Limpar e Download. O estofamento. Vamos para 1.6rems na parte superior e inferior e zero na esquerda e direita, que então puxará nosso texto para o centro de nossos botões. Voltar para o topo temos esta seção que tem um rótulo e também uma entrada. Vamos começar com a nossa gravadora. Defina o tamanho da fonte para ser um pouco maior. Então, 1.8rems. Se também esticar o navegador para ser um tamanho maior. Quando estes dois elementos estão ao lado um do outro. Precisamos também de algum preenchimento à direita deste rótulo. Quero adicionar 1.6rems. Tanto este rótulo como também a entrada foi cercada em um div chamado wrapper de entrada. Agora vamos usar isso e adicionar um pouco de preenchimento e também uma cor de fundo. Esta era a aula, então usamos o ponto. O fundo quer dar a isso uma cor simples de cinza e também um valor de preenchimento de 1,6rems. Em seguida, para terminar esta seção CSS fora, vamos selecionar nossa seção de tela, que está sobre o lado esquerdo na seção principal, e, em seguida, definir isso para ser 100 por cento do espaço disponível. É tudo o que vamos fazer. Podemos ir em frente e fazer mais algumas mudanças. O que alguém mantém o estilo deste projeto razoavelmente simples, e, em seguida, no próximo vídeo, eu vou passar para o desenho para o Canvas. 5. Desenhando na tela: Para que este projeto agora ganhe vida, precisamos adicionar um script e também descobrir como podemos desenhar para a tela. Na parte inferior do nosso índice ou html, logo acima da cláusula e do corpo, vamos adicionar nosso script com a fonte de script.js. Sobre a barra lateral, agora podemos criar este script.js. Agora temos uma tela elementos dentro do nosso html, e isso também tem o ID da tela. Mas como vamos desenhar para esta tela? Bem, a primeira coisa que queremos fazer é criar uma constante chamada tela. Dentro daqui, vamos selecionar essa tela pelo ID, então getElementByID e o ID foram canvas. Isso agora está nos dando nossa referência ao nosso elemento html. Precisamos então acessar o que é chamado de contexto de renderização. Isso nos permitirá acessar uma série de funções de desenho, possamos manipular o que está na tela. A maneira como podemos fazer isso é acessando nossos elementos de tela, que restauramos acima. Podemos acessar o contexto usando um método chamado getContext. Nós só vamos estar acessando os recursos 2D, então nós passamos em 2D. Então vamos armazenar isso em uma constante chamada CTX. As referências ctx é usado cada vez que queremos desenhar para a tela. Por exemplo, esse contexto tem um método fillText para desenhar um texto em nossa tela. Vamos acessar nosso contexto, e então podemos fazer uso de uma dessas funções de desenho que mencionamos, que vai ser chamado fillText. Dentro daqui como uma string, vamos passar algum texto que queremos exibir na tela. Adicione qualquer coisa aqui dentro. Podemos então adicionar mais dois valores, que é a largura e também a altura. Vamos para 100 pixels e 50 pixels. Então vamos ver isso no navegador. Leve isso para baixo. A cor do texto mais escura não se destaca muito, mas agora este é o nosso texto na tela. Também podemos criar formas como um retângulo, e também podemos usar o traçado, que é o contorno do retângulo ou a forma, ou podemos usar um preenchimento que vai criar uma forma preenchida. Vamos dar uma olhada em como podemos criar um retângulo na tela. Nós, novamente, acessamos o contexto. Podemos então preencher um retângulo com FillRect. Vamos então passar em todos os valores diferentes. As duas primeiras coordenadas simples x e y da tela onde gostaríamos de iniciar este retângulo. Se inserimos um valor x é zero e o valor y é zero, isso substituirá nosso retângulo no canto superior esquerdo da tela. Um terceiro e quarto valores serão o tamanho do retângulo. Se quiser que seja 50 por 100, agora tem 50 pixels de largura e 100 de altura. Se não quiséssemos essa cor sólida e só quiséssemos um contorno, poderíamos mudar isso para o strokeRect. Este traçado e este preenchimento também podem ser aplicados quando criamos formas diferentes também. Em vez de especificar um tamanho fixo como este, também podemos acessar nosso objeto de tela e passar isso como uma variável. Podemos definir a largura da tela e também a tela, a altura. Isso agora vai nos dar um retângulo que é a altura e a largura da tela. Também podemos usar diferentes objetos coloridos. A maneira como podemos mudar a cor é acessando o contexto e, em seguida, usando o FillStyle. Eu quero definir este próximo retângulos ser igual ao valor x de 42e9f5. Vamos agora mover isto acima do nosso retângulo. Podemos mudar isso para ser um FillledRectangle e também fazer isso um pouco menor. Vamos mudar isso para 50 por 50 para nos dar um quadrado. Outro exemplo do que podemos fazer com a tela é desenhar algumas linhas para criar formas mais complexas. Por exemplo, se quiséssemos criar algo como um triângulo, podemos criar uma série de linhas para criar a forma. Vamos começar a nossa forma com CTX.beginPath. BeginPath irá iniciar ou redefinir quaisquer caminhos existentes que criamos acima. Depois disso, vamos declarar exatamente onde na tela, queremos começar nossa união. Por exemplo, se quiséssemos começar isso no centro da tela, faremos Ctx.moveto. MoveTo vai mover nossos pontos de referência para qualquer lugar na tela sem realmente desenhar nenhuma linha. A maneira como podemos colocar isso no centro é ajustando a lona. Largura, e depois dividi-la por 2 para colocar isso no centro. Então podemos fazer o mesmo para a tela.altura dividindo isso por 2. Neste momento, devemos estar em uma posição onde estamos prontos para desenhar algumas linhas retas do centro da nossa tela. Acedemos ao nosso contexto e depois LineTo. Se você quiser desenhar uma linha para o canto superior direito, as coordenadas que precisamos no momento são 300 e zero. Então 300 para o valor x e zero para o valor y. Por que precisamos desses dois valores exatos? Bem, isso ocorre porque, por padrão, a tela tem 300 pixels de largura por 150 pixels de altura. Se esta posição no canto superior esquerdo for zero, zero, o primeiro valor de 300, colocaremos isso bem no final. Em seguida, usamos o valor zero para ficar no topo da tela. Se adicionarmos quaisquer outros valores dentro daqui, isso irá empurrar isso ainda mais para baixo. Nós realmente criamos nossa primeira linha com a série na tela. Também precisamos usar ctx.stroke. Então tudo o que precisamos fazer a partir daqui é criar uma série de linhas. O próximo, se quisermos fazer isso do canto superior direito para baixo direito, começamos mantendo o valor x como 300, que está bem no final. Como descrevemos a altura da tela por padrão vai ser 150, mas isso nos deixa uma linha do canto superior direito para o canto inferior direito. Se quiséssemos mandar isso de volta ao centro, então temos duas opções. Poderíamos ir em frente e criar uma nova linha exatamente como fizemos com essas duas linhas de código, ou em vez disso, podemos voltar para o início, que é o centro da tela usando Ctx.ClosePath. Agora terei um triângulo. Se quiséssemos preencher isso com uma cor sólida, poderíamos substituir o traçado por preenchimento. Esta é agora uma introdução básica para participar na tela. Isso é ótimo, mas não precisamos de nada disso para nosso projeto. Em vez disso, precisamos desenhar uma imagem nesta tela. Em vez disso, vamos remover esta seção, e podemos criar uma nova imagem elementos. Podemos criar uma nova imagem elementos com nova imagem. Este novo construtor de imagem vai criar um novo elementos de imagem assim como fizemos quando usamos documents.createElements. Jogue isso em uma constante chamada img. Em seguida, precisamos definir uma fonte de imagem. Precisamos pegar nossa imagem e definir o atributo fonte para ser igual à nossa imagem, que é bridge.jpg. Lembre-se de alterar esta fonte de imagem se você tiver usado uma imagem diferente. Agora temos uma nova imagem elementos e definimos a fonte. Agora precisamos posicionar isso na tela. Mas antes de fazermos isso, precisamos realmente ter certeza de que essa imagem foi criada antes de tentarmos desenhar isso na tela. A maneira que podemos fazer com isso é usando onload, que vai executar uma função uma vez que nossa imagem foi criada. Dentro desta função, vamos desenhar nossa nova imagem para a tela. Como sempre, selecionamos nosso contexto, e então temos acesso a DrawImage. A primeira coisa que precisamos adicionar é a imagem, que você deseja desenhar, e esta é a nossa variável de imagem. Em seguida, definimos a posição na tela onde queremos que esta imagem seja exibida. Se definirmos isto como zero e zero, este será apresentado a partir do canto superior esquerdo. Agora vemos uma imagem na tela, mas a imagem é muito grande para a tela. Outra coisa que podemos fazer é adicionar mais dois valores, e isso é para definir a largura e altura da imagem. Se definirmos isso para 300 com a altura e 150 para a largura, isso agora garantirá que nossa imagem tenha o mesmo tamanho que a tela. Mesmo que agora vejamos essa imagem na tela, ela não parece muito alta qualidade. Agora, isso ocorre porque a imagem foi esticada para ter o mesmo tamanho de uma tela. No entanto, podemos alterná-lo e certificar-se de que a tela é expandida para ter o mesmo tamanho da imagem. Vamos fazer isso logo acima de onde desenhamos nossa imagem. Podemos definir a largura da nossa tela com lona.width para ser igual à largura da nossa imagem. Logo abaixo, exatamente o mesmo para a nossa altura, definimos a altura da tela para ser igual à altura da nossa imagem. Podemos mover os dois últimos valores onde definimos nosso tamanho de imagem dentro do DrawImage. Isso agora nos dará uma imagem clara, já que a tela agora está esticada para ter o mesmo tamanho da imagem. Esta é uma visão geral básica de algumas das coisas que podemos lidar com a tela. Mas só vamos usar isso para adicionar imagens e manipular os pixels. Em seguida, queremos fazer uso do nosso uploader de arquivos, que adicionamos na parte superior desta barra lateral. Isso vai permitir que o usuário selecione uma imagem de seu computador em vez de usar este valor codificado apenas aqui. 6. Como fazer upload de imagens: Exibir uma imagem na tela ou na tela agora é um grande passo em direção ao funcionamento do nosso aplicativo. Mas a próxima coisa que queremos fazer é permitir que o usuário clique no carregador de arquivos, selecione uma imagem de sua escolha e, em seguida, exiba isso na tela. No momento, estamos apenas codificando uma fonte de imagem com a imagem que está dentro da pasta do nosso projeto. É o que vamos fazer agora neste vídeo. Vamos começar criando um novo objeto FileReader, e então podemos armazenar isso dentro de uma constante chamada leitor. Este FileReader nos permitirá ler o conteúdo dos arquivos, ou, no nosso caso, a imagem que está armazenada no computador do usuário. Isso nos permitirá usar o uploader de arquivos, e esta é a entrada que adicionamos no HTML. Podemos então selecionar uma imagem e, em seguida, definir isso como nossa fonte de imagem. O primeiro passo para isso acontecer é ir com nosso índice e aqui dentro se dermos uma olhada para o nosso uploader, este tem o ID do uploader. Vamos usar getElementByID para selecionar essa entrada e, em seguida, acionar uma função quando isso é alterado. Voltar aos nossos scripts na parte inferior, podemos criar uma referência a esta entrada chamada ImageLoader, pegar o ID com getElementByID, eo ID foi uploader. Podemos então selecionar nossa constante de ImageLoader e adicionar um EventListener. O evento que queremos ouvir é o evento de mudança, e isso ocorrerá quando um novo arquivo for carregado. Quando isso acontece, vamos criar uma função chamada UploadImage. Então vamos criar esta função logo acima, que foi UploadImage. Este UploadImage também vai passar as informações do evento, uma vez que estamos usando uma entrada. Para começar nesta função, vamos fazer um log de console e simplesmente produzir o valor do nosso leitor de arquivos. Vamos enviar o nosso leitor, tudo para o navegador, clique com o botão direito do mouse e inspecionar, e podemos ver quais dados são passados no console. Escolha nosso arquivo, selecione qualquer imagem, e então aqui podemos ver a saída do nosso leitor de arquivos. Atualmente, todos os nossos valores, incluindo o resultado, é definido como um valor de null. Isso ocorre porque, embora tenhamos uma configuração de objeto leitor de arquivos, ainda não passamos nossos dados de imagem. Os dados do arquivo vêm do nosso carregador de imagem, que é armazenado dentro desta variável e. Agora vamos dar uma olhada no valor de e, recarregar o navegador, e podemos selecionar uma nova imagem, abrir isso, esta é toda a informação que é passada para esta função sobre nosso evento de mudança. Se, em seguida, abrir o alvo, que é a nossa entrada, clique na seta e, em seguida, role para baixo, temos este valor chamado arquivos. Esta é uma lista de todos os arquivos que foram carregados do nosso carregador de arquivos. É claro que só permitimos o upload de um único arquivo. Então isso só vai ter o valor de zero. Este é o nosso nome, que é bridge.jpg. Agora podemos passar esses dados de imagem para o nosso leitor de arquivos. Lembre-se que acessamos o evento, então acessamos os alvos, então acessamos os arquivos, e o primeiro arquivo de zero. Voltar à nossa função, agora podemos segmentar o nosso leitor, e então podemos definir este URL de arquivo com ReadAsDataURL. Dentro de seu método, passamos a localização do nosso arquivo, que era e.targets.files, e o primeiro arquivo que é o índice de zero. Agora vamos fazer um novo log de console novamente com o valor do leitor e ver o que acontece desta vez. Lembra-te, da última vez que fizemos isto, obtivemos o valor de nulo. Então abra o console, selecione o novo arquivo. Temos nosso objeto FileReader, e agora dentro desse resultado na parte inferior, agora temos alguns dados de arquivo em vez do valor de null. Este FileReader agora tem todos os dados que precisamos. Agora, tudo o que precisamos fazer é acessar nosso leitor, e então, assim como fizemos acima com nossa imagem, nós também vamos acionar uma função quando isso terminar de carregar. Isso agora nos deixa na mesma posição que tínhamos logo acima aqui, onde temos nossa fonte de imagem, e então precisamos carregar isso na tela. Para fazer isso, podemos mover a seção apenas aqui, colar isso dentro de nossa função onload, e agora em vez de seu valor codificado de bridge.jpg, vamos agora definir a fonte da imagem para ser igual ao leitor e também acessar o valor de resultado que acabamos de ver no console. Agora tudo o que resta a fazer é salvar isso e testar isso no navegador. Então, escolhemos um arquivo, pegamos qualquer imagem, e esse arquivo agora é exibido dentro da tela. Espero que isso esteja funcionando para você também. Está acontecendo um pouco aqui, então vamos fazer uma breve recapitulação. Se voltarmos ao nosso guião. Primeiro, pegamos nossa entrada de arquivo e armazenamos isso dentro de uma constante chamada ImageLoader. Adicione tudo isso e ouça as alterações que ocorreram após o upload de um novo arquivo. Isso vai então acionar nossa função UploadImage, que definimos apenas aqui. Criamos uma variável de leitor que é igual a um novo objeto FileReader. Este leitor de arquivos nos permite ler o conteúdo de qualquer arquivo enviado, que são imagens no nosso caso. Uma vez que esta função UploadImage tenha sido executada, ele irá então passar as informações do evento, que contém a imagem que o usuário carregou. Essas informações de arquivo são então passadas para nosso FileReader, e fazemos isso com um método chamado ReadAsDataURL. Finalmente, quando tudo isso terminar e totalmente carregado, vamos então definir a fonte da imagem e, em seguida, exibir isso na tela com nossas imagens. Agora carregando. Em seguida, vamos aprender sobre como acessar todos os pixels que compõem essas imagens. Uma vez que entendemos como todos os pixels compõem uma imagem, podemos então brincar com eles para criar nossos efeitos. 7. Entendendo os dados dos pixels: Para entender como manipular nossas imagens e também como adicionar efeitos, primeiro precisamos entender como pixels compõem nossas imagens. Para obter os dados de pixel de nossa tela, temos um método disponível chamado GetImageData. Vamos dar uma olhada em como podemos usar isso dentro do nosso script. Instale isso dentro de uma constante chamada ImageData. Vou definir isso igual a ctx, e então chamar o método que acabamos de mencionar, que foi GetimageData. GetimageData vai nos permitir pegar todos os pixels que você armazenou na tela. Como queremos pegar todos os valores de pixel do tamanho total da tela, os dois primeiros valores que vamos adicionar é a posição inicial do canto superior esquerdo, que é 0, 0. Os próximos dois valores, queremos pegar a largura total da tela, e também a altura total. Podemos fazer isso com tela.largura e também selecionando a tela.altura. Isso vai pegar todos os dados da imagem do canto superior esquerdo através da página para o canto inferior direito. Apenas como uma nota lateral, podemos selecionar uma parte menor da tela se quisermos apenas os dados da imagem para uma determinada parte. Queremos o tamanho total da tela no entanto, uma vez que a imagem vai ser o tamanho total da tela. Vamos fazer um log do console e ver o que acontece no navegador. Registre nosso ImageData, clique com o botão direito e inspecione. Veja a guia do console. Agora temos esses dados de imagem. Lembre-se desde o início que mencionamos que a largura e altura padrão da tela é de 150 por 300. Nós também temos esses dados e se clicarmos na seta suspensa, vemos que temos um 180.000 valores diferentes. Todos os nossos dados são armazenados em uma estrutura como matriz. Ter 180.000 valores, que compõe todos os nossos dados de tela. Se clicarmos no menu suspenso para expandir qualquer uma dessas seções, vemos todos os valores é definido como zero. Isso ocorre porque atualmente não temos nada armazenado na tela. Agora, se quisermos ver isso com mais detalhes com uma imagem, podemos pegar essas duas linhas de código e colocar isso dentro de nossa própria função de carga. Isso significa que esta seção só será executada depois que uma imagem for carregada. Escolha o arquivo, selecione a imagem. Nossos dados de imagem são agora novamente retornados. Desta vez, embora vemos uma altura diferente e uma largura diferente, uma vez que definimos o tamanho geral da tela para ser igual à nossa imagem. Também vemos agora que temos uma tela maior. Agora temos 4,3 milhões de dados. Esta próxima parte é realmente importante de entender. Primeiro de tudo, se pegarmos nossa altura e nossa largura, podemos multiplicar esses dois valores juntos, então 853, e então multiplicar isso por 1280, que nos dá um valor de 1,09 milhões. Este talvez seja o número de pixels ou o número de pedaços de dados que você esperaria para ser retornado se você multiplicar a largura e a altura. No entanto, temos um valor que é quatro vezes maior. Se multiplicarmos 1091840 pelo valor de quatro, veremos 4,3 milhões, assim como em nossos dados. Isso agora leva à questão de por que obtemos exatamente quatro vezes os valores de volta qualquer número de pixels? Bem, isso é porque cada pixel em nossa tela é composto de quatro canais. Temos um vermelho, verde e azul, e também um valor alfa. Os valores vermelho, verde e azul compõem a cor de cada pixel. Então o primeiro pixel no canto superior esquerdo seria nosso primeiro pedaço de dados. Se entrarmos aqui nosso primeiro pixel no canto superior esquerdo são esses quatro primeiros valores aqui. Este pixel em particular é composto com um valor vermelho de 49, valor verde de 39 e um valor azul de 92. O quarto valor de 255 é o valor alfa, e esta é a opacidade. Se este fosse um valor de zero, isso será totalmente transparente. Mas 255 é o valor mais alto, que significa que não há transparência definida neste pixel específico. O mesmo, se formos para o próximo lote de quatro pixels, você verá os valores vermelho, verde e azul e também o valor alfa final. Nosso primeiro pixel e nosso segundo pixel são as mesmas cores. Se formos para o terceiro lote, então 8, 9, 10, 11, vemos que porque isso está se misturando com uma cor diferente, o valor vermelho subiu de 49 para 50, o valor verde mudou de 39 para 40, e também o valor azul também aumentou. Apenas para recapitular, temos os dados da imagem que foram retornados da tela. Temos a altura e a largura da tela e se multiplicarmos esses dois valores, isso nos dá o número total de pixels na tela. Cada pixel único tem os quatro valores de vermelho, verde, azul e alfa. É por isso que os dados que nos devolvem são exatamente quatro vezes a quantidade de pixels. Agora, com esse conhecimento de como os pixels são feitos usando os quatro canais, vamos agora usar o que aprendemos no próximo vídeo, percorrendo esses pixels e alterando-os para valores diferentes. 8. Vasculhando dados de imagens: Agora sabemos que tudo o que está na tela ou todos os nossos pixels, agora estão armazenados nesta constante chamada ImageData. Agora podemos usar isso para percorrer todos os nossos dados, que são armazenados dentro, e então podemos brincar com os valores de pixel. Para fazer isso, vamos criar uma função, onde podemos pegar esses dados de pixel e ter um pouco de brincar com cada um dos valores. Então eu funciono, e eu o que chamar essa mudança. Também podemos remover nosso registro do console de cima. Podemos pegar essa linha de código aqui. Coloque isso para fora e cole isso dentro de nossa função de mudança. Todos os nossos dados de pixel dentro desta variável são armazenados nesta propriedade de dados. Então, podemos acessar isso e criar nova constante chamada de dados, e definir isso igual a ImageData.data, e isso nos dará acesso a todos os valores de pixel dentro desta propriedade de dados. Portanto, sabemos que há centenas, milhares, ou mesmo milhões de pedaços de dados dentro desta propriedade. Então a melhor coisa que podemos fazer é percorrer cada um destes em lotes de quatro. Se percorrermos isso em lotes de quatro, sabemos que o primeiro valor em cada loop será sempre o valor vermelho. O segundo valor será sempre o verde, e o terceiro valor será sempre o valor azul. Então, para fazer isso dentro de nossa função de mudança vamos criar um for-loop. Uma vez que o loop é executado, vamos criar uma nova variável chamada i, e inicialmente definir isso para ser 0. Queremos que este for-loop continue em execução enquanto houver valores armazenados dentro de nossos dados. Então vamos continuar assim, desde que eu seja menor que data.length. Então, dados são todos os nossos dados de imagem e comprimento é o número de itens, então nosso loop continuará funcionando enquanto houver dados de pixel para percorrer. A terceira declaração que vamos dizer i mais é igual a 4. Então, no primeiro loop, vamos definir a variável de i para ser igual a 0, e, em seguida, para cada loop depois vamos incrementar este valor em quatro. Fazemos isso porque, como já sabemos, cada pixel tem quatro valores. Então, aumentar isso em quatro em cada loop será o início de cada conjunto de dados de pixel. No primeiro loop vamos pegar os primeiros quatro valores de pixel. Estes serão estes aqui. Podemos acessar estes com dados, e assim como um array, podemos acessar o primeiro, que é o valor vermelho, fizemos dados i. Lembre-se no início, i é igual a 0, então isso será exatamente o mesmo que os dados 0. Se duplicarmos isso duas vezes mais, podemos obter o segundo valor com o número de índice de um. Este é o valor de verde e o valor azul com o número de dois. Se quiséssemos, também poderíamos pegar o valor Alfa ou a transparência, mas não precisamos disso para este exemplo. Este é o primeiro lote ou os quatro primeiros valores. Uma vez que este loop tenha sido executado, o valor de i será incrementado em quatro, e então isso irá passar para o próximo conjunto de quatro valores, deixando i para ser igual a 4, 5, 6 e 7. Portanto, ao invés de ter esses valores codificados, podemos definir isso para ser igual a i, que é o primeiro de cada conjunto de quatro, e i mais 1, e então i mais 2. Esta primeira linha aqui será sempre igual a um valor vermelho. Isso sempre será igual aos nossos valores verdes, e isso sempre será igual aos nossos valores azuis. Então, se quisermos brincar com essas cores, um valor RGB vai de zero até 255. Então, por exemplo, poderíamos definir o valor vermelho para ser igual a 255. Para ver essas alterações, agora precisamos aplicar esses pixels de volta à tela. Para fazer isso, podemos usar um método chamado putimaGedata. Então, logo após o nosso for-loop, podemos novamente acessar nosso contexto, e então o método chamado putimaGedata. Os dados que queremos colocar de volta na tela são este ImageData. Eu vou aplicar isso no canto superior esquerdo para a tela com a posição de 0, 0. Então, finalmente, vamos chamar essa função de mudança, precisamos adicionar um manipulador de clique para o nosso primeiro botão. Dentro do nosso índice, começaremos com o botão de escala de cinza, que é o primeiro botão nesta seção de efeitos. Vamos pegar esses documentos do Word e desta vez vamos usar QuerySelectorAll. Isso vai pegar todos os elementos em nossa página, que tem o tipo de botão. Porque temos vários botões, então precisamos selecionar nosso primeiro botão com a posição de índice de zero. Usando addEventListener, podemos então ouvir quaisquer eventos de clique, que vão então executar nossa função de mudança. Vamos tentar isso no navegador. Vamos reiniciar o nosso servidor ao vivo, escolher uma nova imagem. Então, se clicarmos em nosso primeiro botão, que é a escala de cinza, então definimos todos os valores vermelhos dentro de nossos dados de imagem para ser um forte valor vermelho de 255. Vamos agora atualizar nosso for-loop, e vamos restabelecer nossas cores vermelhas para serem exatamente como elas estão na imagem. Vá até a nossa seção verde, onde vamos definir o verde para 255. Carregue esta imagem, clique em nossa função e agora vemos a cor verde ter um efeito. Poderíamos também fazer o mesmo para o terceiro ou o valor azul também. Isso é tudo o que precisamos fazer para aplicar efeitos em nossas imagens. Agora é apenas o caso de ajustar os valores de cor de nossos pixels dependendo de quais efeitos queremos aplicar, e isso é o que vamos começar a fazer em seguida quando aplicarmos um efeito de escala de cinza. 9. Funções escala de cinza, sépia e inverter: Com o conhecimento que agora temos sobre apenas os valores de pixel, agora podemos adicionar alguns efeitos e vinculá-los aos nossos botões. A primeira coisa que vamos fazer é começar com o nosso botão em tons de cinza. Então, podemos alterar essa função de exemplo para escala de cinza. Com isso, também precisamos modificar nosso ouvinte de cliques, de mudança, isso também precisa ser o nome da função de escala de cinza. Para este efeito de escala de cinza, precisamos criar uma cor de cinza e, em seguida, adicionar isso a cada um de nossos valores vermelho, verde e azul. Dentro do nosso loop, vamos criar uma constante para o nosso valor cinzento. Então precisamos criar nosso valor cinza. Nós vamos fazer isso, primeiro de tudo, selecionando nossa cor vermelha, que é dados i. Nós vamos adicionar isso ao nosso verde, que é dados i mais 1. Em seguida, adicionamos estes ao nosso azul, que é dados i mais 2. Tudo o que estamos fazendo aqui é simplesmente adicionar todas as três cores para cada pixel na tela. Para reduzir isso para ser um tom de cinza, também precisamos manipular esses três valores. Então o valor vermelho, precisamos multiplicar isso por 0,21, a cor verde que está no meio, multiplicar isso por 0,71 e o azul é multiplicado por 0,07. Agora não há regra dura e rápida que precisamos usar para esta cor cinza. Esta é simplesmente uma fórmula que se encontra ao pesquisar o assunto. Podemos usar valores diferentes aqui dentro. Agora podemos pegar nosso valor cinza e definir isso como nosso vermelho, também como nosso verde, e também como nossos valores azuis. Vamos testar isso no navegador. Podemos atualizar, escolher uma nova imagem. Vamos tentar nossos efeitos em tons de cinza. Bom, nossa escala de cinza está funcionando e na próxima semana vamos passar para o efeito sépia, que é basicamente uma versão mais quente de uma imagem em tons de cinza. Todas essas funcionalidades serão semelhantes, então podemos copiar nossa função de escala de cinza, e adicionar isso logo abaixo. Este chama-se sépia. Ainda pegamos todos os dados da imagem, mas desta vez precisamos manipular isso de uma maneira ligeiramente diferente. Então vamos usar a cor cinza base da função de escala de cinza, mas em vez disso vamos adicionar alguns valores extras de vermelho e verde. Então, para o valor vermelho, que é primeiro, podemos adicionar 95, um valor verde, vamos adicionar 58, e isso dará à nossa imagem um tom ligeiramente mais quente. Podemos então chamar esta função pelo nosso segundo botão. Vamos copiar isso, QuerySelectorAll e, em seguida, podemos selecionar o nosso segundo botão com o número de índice de 1, a função é sépia. Vamos tentar isto. Veja como uma imagem e clique no botão. Isto dá-nos esta versão mais quente da nossa imagem em tons de cinza. Em seguida, temos a função inverter, então vamos copiar a função sépia. Adicione isso logo abaixo. Esta é a nossa função invertida. Sob o efeito invertido também é conhecido como uma imagem invertida. As cores são invertidas, por exemplo, um preto se tornará branco e assim por diante. Isso nos dará um efeito semelhante aos negativos de fotos de estilo antigo, que costumávamos obter ao desenvolver fotos. Para inverter, não precisamos usar esta seção cinza, então podemos excluir esta linha aqui, em vez disso, precisamos deduzir o valor de 255 de cada uma de nossas cores. A razão pela qual fazemos isso é porque um valor RGB vai de 0 a 255. Se deduzirmos 255, isso nos dará o efeito oposto. Para dados i, que é vermelho e deduzir os dados i. valor verde, fazemos exatamente o mesmo, isto é 255, e depois deduzir dados i mais 1. O azul, isto é 255, e, em seguida, deduzir dados i mais 2. Em seguida, colorimos isso com o nosso botão e este botão é a posição 2, eo nome da função é invertido. Vamos tentar este. Aqui está o arquivo. Este também está funcionando. Agora, nós temos nossos três primeiros botões agora ligados, nós vamos agora passar para o próximo vídeo, onde nós vamos então trocar em torno de todos os valores de pixel para nos dar nossos quatro efeitos finais. 10. Adicionando efeitos adicionais: As próximas funções de arquivo que vamos adicionar, serão apenas um caso de alternar em torno de nossos valores vermelho, azul e verde. Vamos começar com a mudança em nossos valores vermelho, verde e azul para ser vermelho, azul e verde. Vamos pegar nossa última função e podemos duplicar isso logo abaixo. O nome da função vai ser rbg. O que queremos fazer aqui é mudar o vermelho, verde e azul para depois vermelho, azul e depois verde. Para este, o vermelho permanece o mesmo tudo o que precisamos fazer é definir o primeiro valor para ser igual a vermelho, que é dados [i]. O segundo valor que está aqui, este vai ser igual a azul. Azul é o nosso terceiro valor de i mais 2, vamos mudar isso. Então nosso terceiro valor será verde, que é i mais 1. Estas são as nossas cores gratuitas agora trocadas. No entanto, embora com esta função, há um pequeno problema. Definimos o valor vermelho para ser igual ao valor vermelho, que é completamente fino. Em seguida, definimos qualquer valor verde para ser igual a azul, o que é bom também. No entanto, embora agora tenhamos reatribuído o valor da tela para ser uma cor diferente. Agora, quando tentamos atribuir esta cor verde no final aqui, isso agora está sendo substituído. Isso significa que não é a cor verde original para cada loop após o primeiro. Se estamos substituindo qualquer um desses valores e, em seguida, reutilizá-los, então precisamos armazenar a cor original dentro de uma variável. Vamos definir uma const, e este é o nosso valor verde. Defina isso igual a dados i mais 1. Este será sempre o valor verde original. Portanto, quando obtivermos isso vai mudar. Mas também podemos acessar o valor verde original depois que mudamos isso também. Só para recapitular, quando percorremos todos os nossos pixels, estamos substituindo nosso valor verde com este azul. Portanto, quando tentamos usar isso na parte inferior, uma vez, não teremos mais a cor original. Portanto, precisamos armazenar isso em uma constante logo acima. Agora vamos duplicar nosso clique “Ouvinte” vamos colocar no número 3, qualquer função é rbg. Vamos tentar, escolher um novo arquivo. Nossa função está funcionando agora. Vamos agora passar para trocar nossos valores vermelho, verde e azul por um azul, verde e vermelho, então copie esta função. O segundo vai ser chamado de bgr. A primeira cor que estamos substituindo nosso vermelho pelo valor azul. Estes são dados i mais 2. O segundo valor será verde, e este é i mais um. O terceiro valor é a nossa cor de vermelho, que é dados i. Mas, assim como acima, estamos substituindo nosso valor de dados i por uma cor diferente. Portanto, podemos armazenar nossos dados originais i dentro de uma variável chamada vermelho e definir isso como nosso terceiro valor. Vincule isso ao nosso botão. Este é o botão número 4. O nome da função de bgr. Vamos tentar este. A cor bgr também está funcionando. Temos mais dois, o próximo é gbr, então copie nossa última função. Nós nomeamos isso, o primeiro que precisamos mudar é nossa cor verde. Precisamos definir i plus 1. O segundo valor é azul, que é o nosso i mais 2. O terceiro é o nosso valor vermelho, que é dados [i]. Assim como com a função de perda, estamos substituindo dados [i]. Podemos fazer uso desta constante vermelha e atualizar isso como nosso terceiro valor. Podemos vincular isso ao nosso botão, que é o botão número 5, e o nome da função de gbr. Vamos tentar este, escolher o nosso ficheiro. Este também está funcionando, o que nos move para o último botão, que é substituir nossos valores vermelho, verde e azul por verde, vermelho e azul. Duplica nossa função chamada grb. O primeiro valor é verde, e isso está definido no momento, então tudo bem. O segundo valor de vermelho é dado [i] e como estamos atualizando isso durante o loop, também podemos fazer uso da cor vermelha original, que é armazenada nesta constante. O último valor é permanecer exatamente o mesmo. Este também é azul 2. Estes são dados i mais 2. Podemos ligar isso ao nosso último botão dentro desta seção e este é o botão número 6, e o funcionamento do grb. Para o navegador. Clique neste botão e nossa última função está funcionando agora. Isso agora é todos os nossos efeitos de imagem agora funcionando. Para finalizar este projeto no próximo vídeo, vamos configurar nosso botão clear para remover quaisquer efeitos e restabelecer a imagem original e também configurar isso para que possamos baixar nossa foto do navegador. 11. Limpeza e download da imagem: As etapas finais para este projeto é adicionar a funcionalidade para limpar quaisquer efeitos da imagem original, e também configurar este botão Download também. Vamos começar com o botão Limpar que vai remover qualquer um dos efeitos aplicados e restabelecer a imagem original. Aplicar isso é bastante simples. Tudo o que vamos fazer é escrever uma função que será acionada quando o botão Limpar for pressionado. Isso acessará os resultados originais do leitor de arquivos e, em seguida, podemos configurá-lo para ser a fonte da imagem. Vamos voltar ao nosso script e vamos criar uma nova função chamada ClearChanges. Primeiro de tudo, vamos fazer um log de console para o nosso FileReader, e então podemos chamar nossa função do nosso botão Limpar, que é o índice número 7. Vamos tentar isto. Mais no navegador podemos ir para as ferramentas do desenvolvedor, para o Console. Se clicarmos no botão Limpar, agora temos acesso ao nosso FileReader. Assim como anteriormente antes de definir uma imagem, vemos que o resultado é definido como nulo. Mas se fôssemos fazer upload de qualquer imagem e depois clicar em Limpar, então obtemos um novo FileReader resultados com os resultados da nossa imagem. Agora podemos acessar este FileReader.result e, em seguida, definir a fonte da imagem. Vamos remover o registro do console. Podemos então acessar nossa variável de imagem, e definir a fonte para ser igual ao reader.result. Vamos tentar isto. A primeira coisa que precisamos fazer é aplicar qualquer efeito, como inverter. Limpe isso, e agora teremos acesso à imagem original. Finalmente, também temos o botão Download, que vai permitir que o usuário baixe a imagem depois de ter colocado quaisquer efeitos. Ao longo do nosso script, podemos criar isso como uma função chamada download. Então aqui dentro vamos criar uma constante para armazenar nossa imagem. Cortamos a imagem que você deseja da tela e, em seguida, usamos um método chamado ToDataURL. ToDataURL retornará o URL de nossa imagem de tela em um formato de imagem PNG padrão. Se quiséssemos isso em um formato diferente, poderíamos mudar isso para ser image.jpeg. Se o suporte do navegador permitir, também podemos usar WebP2. Eu só vou considerar isso como o PNG padrão, e como mencionado antes, este ToDataURL retornará o URL da imagem. Como podemos realmente fazer o download desta imagem? Bem, podemos baixar um URL de imagem com um link. Podemos criar um link usando o elemento a, e a maneira como fazemos isso é document.CreateElement, que irá criar um link para nós, e podemos criar nosso link dentro aqui, que é um elemento. Armazene isso dentro de uma constante chamada link. Assim como qualquer link HTML normal, também podemos acessar isso, e definir o href. O href é o URL para o qual vamos vincular, e já temos o nosso URL logo acima armazenado dentro desta variável de imagem. Em seguida, também vamos acessar nosso link e adicionar o atributo de download, definindo isso como igual para ser image.png. Estes atributos de download que acabamos de adicionar ao nosso link especificarão que o alvo será baixado quando o usuário clicar neste link. Isso significa que quando um usuário clica neste link, ele baixará o que está definido para o href, que é a nossa imagem. O que fizemos efetivamente agora é criado um elemento de link HTML falso, que não foi exibido no navegador. Isso significa que, como o link não está sendo exibido no navegador, não podemos clicar nele da maneira usual para baixar essa imagem. Em vez disso, podemos simular um clique do mouse em um elemento usando o método click. Para acessar nossos elementos de ligação vontade, chame o método click, e vamos vincular esta função de download com o nosso botão. Este é o botão número 8, que irá acionar nosso método de download e podemos selecionar a imagem para testar isso. Escolha qualquer um desses efeitos, clique em Download. Parece haver um problema, então vamos para o console, podemos clicar com o botão direito do mouse e inspecionar. Vamos ver Canvas.ToDataURL não é uma função, então vamos para a nossa função de download. Eu acho que nós só precisamos de mudanças para ser letras maiúsculas para URL. Vamos tentar isto. Escolha um arquivo. Clique no botão Download e nossa imagem será baixada. Isso agora nos deixa com um botão Limpar e Baixar funcionando. Obrigado por aceitar este projeto, e eu vou vê-lo no próximo. 12. Siga-me no Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Então obrigado mais uma vez, boa sorte, e espero vê-lo novamente em uma aula futura.