diff options
| author | dan <[email protected]> | 2023-06-17 22:32:19 -0400 |
|---|---|---|
| committer | dan <[email protected]> | 2023-06-17 22:32:19 -0400 |
| commit | 041c22b43e59228c1d5384e55e15f117d740a764 (patch) | |
| tree | 3ab7e34b85f1609144465b8c411ba4a8ca8e7832 | |
| parent | 3fb99093d6fec345163fce39ec0202a4dbdccea7 (diff) | |
| download | photo-album-gen-041c22b43e59228c1d5384e55e15f117d740a764.tar.gz photo-album-gen-041c22b43e59228c1d5384e55e15f117d740a764.tar.bz2 photo-album-gen-041c22b43e59228c1d5384e55e15f117d740a764.zip | |
feat: can save images individually
| -rw-r--r-- | demo.js | 29 |
1 files changed, 26 insertions, 3 deletions
@@ -17,7 +17,12 @@ const htmlOuter = inner => ` </style> </head> <body> +<div id='preview'> ${inner} +</div> +<script> +${downloadImage.toString()} +</script> </body> </html> `; @@ -34,7 +39,21 @@ function download() { + ';charset=utf-8,' + encodeURIComponent(htmlOuter(elHtml)); link.click(); - URL.revokeObjectURL(link.href); +// 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() { @@ -46,19 +65,23 @@ function addimages() { function renderImages() { preview.innerHTML = ''; - images.forEach(x => { + 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}; + fr.onload = () => {img.src = fr.result; img.name = img.name}; fr.readAsDataURL(file); img.onload = () => { images.push(img); |