const htmlOuter = inner => ` Photo Album ${inner} `; let images = []; function download() { const elHtml = preview.innerHTML; const link = document.createElement('a'); const mimeType = 'text/plain'; link.download = `${(new Date()).toISOString()}-photobook.html`; link.href = 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(htmlOuter(elHtml)); link.click(); URL.revokeObjectURL(link.href); } function addimages() { const files = image.files; for (let i = 0; i < files.length; i++) { addimage(files[i]); } } function renderImages() { preview.innerHTML = ''; images.forEach(x => { // const deleteButton = document.createElement('button'); x.style.maxHeight = '100%'; x.style.maxWidth = '100%'; x.style.paddingTop = '1em'; preview.appendChild(x) }); } function addimage(file) { const img = new Image; const fr = new FileReader; fr.onload = () => {img.src = fr.result}; fr.readAsDataURL(file); img.onload = () => { images.push(img); renderImages(); } }