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 downloadImage(index) {
for (let i = 0; i < preview.childNodes.length; i++) {
const node = preview.childNodes[i];
if(node.nodeName === 'IMG' && 0 === index--) {
const image = node;
const link = document.createElement('a');
link.download = image.name;
link.href = image.src;
link.click();
return;
}
}
}
function addimages() {
const files = image.files;
for (let i = 0; i < files.length; i++) {
addimage(files[i]);
}
}
function renderImages() {
preview.innerHTML = '';
images.forEach((x, i) => {
// const deleteButton = document.createElement('button');
const downloadButton = document.createElement('button');
downloadButton.innerText = 'Save Image';
downloadButton.setAttribute('onclick', `downloadImage(${i})`);
x.style.maxHeight = '100%';
x.style.maxWidth = '100%';
x.style.paddingTop = '1em';
preview.appendChild(x)
preview.appendChild(downloadButton);
});
}
function addimage(file) {
const img = new Image;
const fr = new FileReader;
fr.onload = () => {img.src = fr.result; img.name = file.name};
fr.readAsDataURL(file);
img.onload = () => {
images.push(img);
renderImages();
}
}