gQezYW

gqezyw.markdown

gQezYW

A Pen by Henry Fritz on CodePen.

License.

index.html

<div class="columns has-background-white">
  <div class="column is-offset-1 is-6">
    <h1 class="is-size-1 has-text-centered ">Amazon Image Scraper</h1>
<pre class=" has-background-light">
  //  select nodes of class "imageTagWrapper", featured product images
var nodes = document.getElementsByClassName('imgTagWrapper');
  //  iterate through returned div nodes.
for (image in nodes)
  //  check if the first child element of the node is of type HTMLImageElement,
  //  if it is, pass the image instance to the downloader function, otherwise log "not an image"
(nodes[image].children[0] instanceof HTMLImageElement) ? 
downloader(nodes[image].children[0])
: console.log('not an image');


  //  downloader function, takes an image html element as input
function downloader(inputHTMLImageElement){
  //  create new link element
var link = document.createElement('a');
  //  set href equal to the currentSrc of the passed html image element
link.setAttribute('href', inputHTMLImageElement.currentSrc);
  //  set download attribute
link.setAttribute('download', 'Amazon Scraped Image -' + inputHTMLImageElement.currentSrc.substring(15, 20));
  //  set target to new frame
link.setAttribute('target', '_blank');
  //  make element invisible before appending to body
link.style.display = 'none';
//append element
document.body.appendChild(link);
  //  fire click event
link.click();
  //  remove element
document.body.removeChild(link);
}
</pre>
  </div>
  <div class="column">
    <h2 class=" is-size-3 has-text-justified title">Henry Fritz <br/>
    Design & Development</h2>
    <br/>
    <p><a href="https://henryfritz.xyz/" class="button is-danger">henryfritz.xyz</a></p>
    <br/>
    <p class="is-size-7">To use this, copy either the commented code here or uncomment the code in the javascript tab of this codepen (by selecting all, holding down  ctrl+ /, then copying ) and navigate to the product page. Once you are on the product page, open your javascript console (ctrl + shift + j in chrome) and paste the code. Once it executes your files should begin to download or open up in new tabs, depening on which browser you are using.</p>
  </div>
  <div class="column is-1"></div>
</div>

script.js

// var nodes = document.getElementsByClassName('imgTagWrapper');
// for (image in nodes)
// (nodes[image].children[0] instanceof HTMLImageElement) ? 
// downloader(nodes[image].children[0])
// : console.log('not an image');

// function downloader(inputHTMLImageElement){
// var link = document.createElement('a');
// link.setAttribute('href', inputHTMLImageElement.currentSrc);
// link.setAttribute('download', 'Amazon Scraped Image -' + inputHTMLImageElement.currentSrc.substring(15, 20));
// link.setAttribute('target', '_blank');
// link.style.display = 'none';
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// }

style.css

.is-size-7{
  font-size:.2em;
  text-align:justify;
}
.title{
  padding-top:80px;
  letter-spacing:-.05em;
  line-height:.81em;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />