|
0
|
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>
|
