Mercurial Hosting > linkmystyle

comparison src/uploadcare/thumbnails.html @ 0:8f4df159f06b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:8f4df159f06b
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style>
6 @import "../tools/tools.css";
7
8 textarea {
9 width: 100%;
10 height: 100px;
11 }
12 p[img] span {
13 display: inline-block;
14 }
15 img {
16 width: 100%;
17 height: 100%;
18 object-fit: cover;
19 }
20 </style>
21 <style change></style>
22 <script src="/uploadcare/uploadcare.js"></script>
23 <script>
24 'use strict';
25
26 function show() {
27 let dim = document.querySelector('input').value;
28 let style = document.querySelector('style[change]');
29 style.innerHTML = `
30 p[img] span {
31 width: ${dim};
32 height: ${dim};
33 }
34 ` ;
35 let urls = document.querySelector('textarea').value;
36 urls = urls.split(/\s+/);
37 let htmlImg = '';
38 let htmlSizes = '';
39 for( let i=0; i<urls.length; i++ ) {
40 let url = urls[i];
41 if( url ) {
42 htmlImg += `<span><img src="${url}"></span> `;
43 htmlSizes += `<span s${i}></span> `;
44 let selector = `span[s${i}]`;
45 let request = new XMLHttpRequest();
46 request.open( 'HEAD', url );
47 request.onload = function() {
48 if( request.status === 200 ) {
49 let span = document.querySelector(selector);
50 span.textContent = request.getResponseHeader("Content-Length");
51 }
52 };
53 request.send();
54 }
55 }
56 document.querySelector('p[img]').innerHTML = htmlImg;
57 document.querySelector('span[sizes]').innerHTML = htmlSizes;
58 }
59 </script>
60 </head>
61 <body>
62 <p><a href="https://uploadcare.com/docs/transformations/image/">Uploadcare docs</a></p>
63 <p>
64 width/height:
65 <input value="300px">
66 </p>
67 <p>
68 URLs:<br>
69 <textarea></textarea>
70 </p>
71 <p>
72 <button onclick="show()">show</button>
73 </p>
74 <p img></p>
75 <p>Sizes: <span sizes></span></p>
76 </body>
77 </html>