mpcarvalho

Possuo pouco conhecimento em JS, então gostaria de solicitar uma ajuda com um script que montei para resgatar imagens de produtos de um determinado site/ecommerce utilizando o EAN do produto. No código abaixo eu passo via form alguns parametros como a URL do site onde quero pesquisar a imagem com "/" e na sequência o campo EAN com todos os códigos de barra que quero pesquisar separados por "," e por ultimo a extensão do arquivo de acordo com a extensão que o site em questão utiliza, jpg ou png. No final tudo será exibido na div dl_imgs e ai então eu posso dar um ctrl + s no meu navegador e salvar todas as imagens de uma vez. O objetivo do FOR é retornar imagem por imagem utilizando os parametros URL + EAN + EXT. Ex: "ecommerce.com.br/imagens/000030201.png". O que acontece é que preencho o campo EAN com todos os códigos de barras que preciso separados por virgula, mas o script não consegue montar o array e me retorna algo parecido com isso: https://cdn-*******.*******.com.br/products/7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589 Como podem ver me trás apenas uma imagem que não existe pois não separou os códigos de barra na matriz. Porem se eu copiar esses mesmos códigos e colocar direto na VAR MATRIZ, o script funciona. Segue abaixo o script utilizado. Desde já agradeço! <script> function loadImgs(){ /*--- Dados do formulário ---*/ var dataform = document.forms[0] || document.forms['dados']; //var t = dataform.imgtotal.value; var url = dataform.url.value; var ext = dataform.ext.value; var ean = dataform.ean.value; dataform.buscar.disabled = true; /*--- Gerar IMGS ---*/ var div = document.getElementById('dl_imgs') || document.dl_imgs; div.innerHTML = ""; novoArray = ean.split(','); var matriz = [novoArray]; for(var i=0; i<matriz.length; i++) { div.innerHTML += '<img src="'+url+""+matriz+''+ext+'" />'; } } </script> PS: Para melhorar ainda mais essa extração, eu gostaria de fazer isso fazendo um UPLOAD de um arquivo XLS contendo 2 colunas EAN e Nome produto, e no final exibir a imagem e abaixo o nome do produto, se alguém puder me dar uma luz de como fazer isso agradeço. Att;

@gabrielms Agora gerou outro problema, as imagens estão vindo duplicadas, vou inserir abaixo o script como ficou. function loadImgs() { /*--- Dados do formulário ---*/ var dataform = document.forms[0] || document.forms['dados']; //var t = dataform.imgtotal.value; var url = dataform.url.value; var ext = dataform.ext.value; dataform.buscar.disabled = true; /*--- Gerar IMGS ---*/ var div = document.getElementById('dl_imgs') || document.dl_imgs; div.innerHTML = ""; var ean = dataform.ean.value; novoArray = ean.split(','); for (var i = 0; i < novoArray.length; i++) { urlImg = url + novoArray[i] + ext; let img = document.createElement('img'); img.src = urlImg; img.onload = function () { div.innerHTML += '<div onclick="removerImage(this)" class="dl_imgs-wrap"><img class="imgs" id="" src="' + img.src + '" /><p style="width: 230px; float=: left; font-size: 12px; margin:0px; margin-top:5px;">'+img.width+" x "+img.height+'<span style="float:right;"></span></p></div>'; //alert(`Image loaded, size ${img.width}x${img.height}`); }; } }

@gabrielms Muito obrigado, além de ter entendido com clareza sua explicação agora meu script funcionou perfeitamente. Estou quebrando a cabeça com outra coisa agora: Quero obter o tamanho "real" da imagem que estou buscando no link e criar um condicional quando a altura for igual a 0px a imagem não seja exibida, e caso for mair que 0px ai sim possa ser exibida. Isso porque quando começo a executar os códigos algumas imagens não são encontradas e retorna com aquela imagem padrão de erro. Já achei diversos códigos na internet que me possibilitou obter o tamanho real da imagem, mas quando tento criar a condicional não funciona.

Possuo pouco conhecimento em JS, então gostaria de solicitar uma ajuda com um script que montei para resgatar imagens de produtos de um determinado site/ecommerce utilizando o EAN do produto. No código abaixo eu passo via form alguns parametros como a URL do site onde quero pesquisar a imagem com "/" e na sequência o campo EAN com todos os códigos de barra que quero pesquisar separados por "," e por ultimo a extensão do arquivo de acordo com a extensão que o site em questão utiliza, jpg ou png. No final tudo será exibido na div dl_imgs e ai então eu posso dar um ctrl + s no meu navegador e salvar todas as imagens de uma vez. O objetivo do FOR é retornar imagem por imagem utilizando os parametros URL + EAN + EXT. Ex: "ecommerce.com.br/imagens/000030201.png". O que acontece é que preencho o campo EAN com todos os códigos de barras que preciso separados por virgula, mas o script não consegue montar o array e me retorna algo parecido com isso: https://cdn-*******.*******.com.br/products/7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589 Como podem ver me trás apenas uma imagem que não existe pois não separou os códigos de barra na matriz. Porem se eu copiar esses mesmos códigos e colocar direto na VAR MATRIZ, o script funciona. Segue abaixo o script utilizado. Desde já agradeço! <script> function loadImgs(){ /*--- Dados do formulário ---*/ var dataform = document.forms[0] || document.forms['dados']; //var t = dataform.imgtotal.value; var url = dataform.url.value; var ext = dataform.ext.value; var ean = dataform.ean.value; dataform.buscar.disabled = true; /*--- Gerar IMGS ---*/ var div = document.getElementById('dl_imgs') || document.dl_imgs; div.innerHTML = ""; novoArray = ean.split(','); var matriz = [novoArray]; for(var i=0; i<matriz.length; i++) { div.innerHTML += '<img src="'+url+""+matriz+''+ext+'" />'; } } </script> PS: Para melhorar ainda mais essa extração, eu gostaria de fazer isso fazendo um UPLOAD de um arquivo XLS contendo 2 colunas EAN e Nome produto, e no final exibir a imagem e abaixo o nome do produto, se alguém puder me dar uma luz de como fazer isso agradeço. Att;