Mercurial Hosting > linkmystyle
diff src/uploadcare/thumbnails.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/thumbnails.html Fri Jul 11 20:57:49 2025 -0600 @@ -0,0 +1,77 @@ +<!doctype html> +<html lang="en"> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "../tools/tools.css"; + + textarea { + width: 100%; + height: 100px; + } + p[img] span { + display: inline-block; + } + img { + width: 100%; + height: 100%; + object-fit: cover; + } + </style> + <style change></style> + <script src="/uploadcare/uploadcare.js"></script> + <script> + 'use strict'; + + function show() { + let dim = document.querySelector('input').value; + let style = document.querySelector('style[change]'); + style.innerHTML = ` + p[img] span { + width: ${dim}; + height: ${dim}; + } +` ; + let urls = document.querySelector('textarea').value; + urls = urls.split(/\s+/); + let htmlImg = ''; + let htmlSizes = ''; + for( let i=0; i<urls.length; i++ ) { + let url = urls[i]; + if( url ) { + htmlImg += `<span><img src="${url}"></span> `; + htmlSizes += `<span s${i}></span> `; + let selector = `span[s${i}]`; + let request = new XMLHttpRequest(); + request.open( 'HEAD', url ); + request.onload = function() { + if( request.status === 200 ) { + let span = document.querySelector(selector); + span.textContent = request.getResponseHeader("Content-Length"); + } + }; + request.send(); + } + } + document.querySelector('p[img]').innerHTML = htmlImg; + document.querySelector('span[sizes]').innerHTML = htmlSizes; + } + </script> + </head> + <body> + <p><a href="https://uploadcare.com/docs/transformations/image/">Uploadcare docs</a></p> + <p> + width/height: + <input value="300px"> + </p> + <p> + URLs:<br> + <textarea></textarea> + </p> + <p> + <button onclick="show()">show</button> + </p> + <p img></p> + <p>Sizes: <span sizes></span></p> + </body> +</html>