Mercurial Hosting > linkmystyle

<!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>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Fri, 11 Jul 2025 20:57:49 -0600
parents
children