diff options
| author | dan <[email protected]> | 2023-06-17 21:49:35 -0400 |
|---|---|---|
| committer | dan <[email protected]> | 2023-06-17 21:49:35 -0400 |
| commit | 3fb99093d6fec345163fce39ec0202a4dbdccea7 (patch) | |
| tree | 53c9130626b71d1a4c35e7dcae50e5ca0df89b91 | |
| download | photo-album-gen-3fb99093d6fec345163fce39ec0202a4dbdccea7.tar.gz photo-album-gen-3fb99093d6fec345163fce39ec0202a4dbdccea7.tar.bz2 photo-album-gen-3fb99093d6fec345163fce39ec0202a4dbdccea7.zip | |
init
| -rw-r--r-- | client.html | 14 | ||||
| -rw-r--r-- | demo.js | 68 | ||||
| -rw-r--r-- | style.css | 0 |
3 files changed, 82 insertions, 0 deletions
diff --git a/client.html b/client.html new file mode 100644 index 0000000..1138dab --- /dev/null +++ b/client.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="stylesheet" href="style.css"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + </head> + <body> + <script type="text/javascript" src="demo.js"></script> + <input type="file" id="image" multiple accept="image" name="image" onchange="addimages()"/> + <button onclick="download()">Download</button> + <div id="preview"></div> + </div> + </body> +</html> @@ -0,0 +1,68 @@ + +const htmlOuter = inner => ` +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <title>Photo Album</title> + <style> + code{white-space: pre-wrap;} + span.smallcaps{font-variant: small-caps;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} + div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} + ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} + </style> +</head> +<body> +${inner} +</body> +</html> +`; + +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(); + } +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/style.css |