<?php
let hh = document.getElementsByTagName('h4');

let jsondata = [];

for (let g=0; g<hh.length; g++)
{
    console.log('g:', g );
    let tit    = hh[g].innerHTML;
    let p      = hh[g].parentElement.children[1].innerHTML;
    let imgurl = hh[g].parentElement.parentElement.children[0].children[0].src;
    let img    = hh[g].parentElement.parentElement.children[0].children[0];
    
    // If we want to reload/check the img url
    //const imgurl = imgurls[i];
    //const img = document.createElement("img");
    //img.crossOrigin="anonymous"
    //img.src = imgurl;
    //await img.decode(); // wait for it to finish loading

    console.log('img.naturalHeight:', img.naturalHeight );
    
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    canvas.height = img.naturalHeight;
    canvas.width  = img.naturalWidth;
    context.drawImage(img, 0, 0);
    let imgdata = canvas.toDataURL("image/jpeg", 1.0); // alt jpeg or png

    // we could use the original name
    //let imgfilename = imgurl.split('/').pop();
    
    let imgfilename = `img${g}.jpg`; // imgurl.split('/').pop();

    console.log('processed image:',  imgfilename);   

   // You're generating a data uri, which has schema, mime-type etc before the actual base64 data data:[<MIME-type>][;charset=<encoding>][;base64],<data>. You'll have to remove all the content before the data then use it.

   ii = { 'imgdata': imgdata,
          'title':   tit, 
          'desc':    p };
   
   jsondata.push( ii );
}


let jsonfile = JSON.stringify(jsondata);

console.log('creating single jsonfile..');

console.log('adding link element');
var a = document.createElement("a");
document.body.appendChild( a );
a.id              = 'downloadlink';
a.style.position  = 'absolute';
a.style.bottom    = '100px';
a.style.left      = '100px';
a.style.fontSize  = '100pt';
a.innerHTML = 'Click to Download';
 
console.log('building blob');
var file             = new Blob([ jsonfile ], {type: 'text/plain'});
a.href               = URL.createObjectURL( file );
a.download           = 'images.json';
a.style['font-size'] = '20pt';

a.click();

console.log('finished');

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js';
document.head.appendChild(script); 

let tt = '';

(async()=>{

let b = document.createElement('button');
b.innerHTML = 'load json';
document.body.appendChild( b );
b.onclick = ()=>{
  let input = document.createElement('input');
  input.type = 'file';
  input.onchange = _ => {
      // you can use this method to get file and perform respective operations
      let files =   Array.from(input.files);
      console.log(files);

      // get the first file (file[0]
      let file = files[0];
      var reader = new FileReader();
      reader.readAsText(file, "UTF-8");
      reader.onload = async function (evt) {
         console.log('loaded');
         let div = document.createElement('div');
         document.body.appendChild( div );
         div.innerHTML = 'filesize:' + evt.target.result.length;

         let json = JSON.parse( evt.target.result );
         console.log('num data:', json.length );

         let myzip = new JSZip();

         for (let k=0; k<json.length; k++)
         {
            let title = json[k].title;
            let desc  = json[k].desc;
            let imgbase64 = json[k].imgdata;
            // console.log( json[k].title );
            let imgfilename = `thumb${k}.jpg`

            myzip.file(imgfilename, imgbase64 .substr(imgbase64 .indexOf(',')+1), {base64: true});
            myzip.file(`h${k}.txt`, title);
            myzip.file(`d${k}.txt`, desc);

            tt += `# ${title}\n\n`;
            tt += `${desc}\n`;
            tt += `<img src='./thumb${k}.jpg>\n`;
         }

         myzip.file(`summary.txt`, tt);


         console.log('creating zip..');
         let content = await myzip.generateAsync({type: "blob"});
         
         console.log('adding link element');
         var a = document.createElement("a");
         document.body.appendChild( a );
         a.id = 'downloadlink';
         a.style.position = 'absolute';
         a.style.top= '20px';
         a.style.left  = '20px';
         a.style.fontSize  = '20pt';
         a.innerHTML = 'Click to Download';
 
         console.log('building blob');
         var file = new Blob([ content ], {type: 'octet/stream'});
         a.href = URL.createObjectURL( file );
         a.download = 'images.zip';
         a.style['font-size'] = '20pt';
         
         a.click();
         
         console.log('finished');
      }
      reader.onerror = function (evt) {
         let div = document.createElement('div');
         document.body.appendChild( div );
         div .innerHTML = "error reading file";
      }
  };
  input.click();
}
})()