Mercurial Hosting > linkmystyle
diff src/uploadcare/compress.html @ 0:8f4df159f06b
start public repo
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Fri, 11 Jul 2025 20:57:49 -0600 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/uploadcare/compress.html Fri Jul 11 20:57:49 2025 -0600 @@ -0,0 +1,44 @@ +<!doctype html> +<html lang="en"> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/uploadcare/croppr.css"; + @import "/uploadcare/uploadcare.css"; + + img { + width: 50%; + } + </style> + <script src="/uploadcare/croppr.js"></script> + <script src="/uploadcare/uploadcare.js"></script> + <script> + 'use strict'; + + uploadcare.maxFileSize = 1000000; + uploadcare.cropprOptions = {}; + + async function loaded(input) { + let info = { file: input.files[0] }; + input.value = null; + await uploadcare.infoCompress(info); + console.log(info); + if( info.canceled ) + return; + document.querySelector('span[original]').textContent = info.file.size; + document.querySelector('p[compressed]').textContent = 'compressed: ' + info.compressedName + ' ' + info.compressed.size; + await uploadcare.infoAddUrl(info); + document.querySelector('img[original]').src = info.url; + let info2 = { file: info.compressed }; + await uploadcare.infoAddUrl(info2); + document.querySelector('img[compressed]').src = info2.url; + } + </script> + </head> + <body> + <p><input type=file accept="image/*" onchange="loaded(this)"> <span original></span></p> + <p compressed></p> + <p>left is original, right is compressed</p> + <p><img original><img compressed></p> + </body> +</html>