Pagina 2 di 2 primaprima 1 2
Visualizzazione dei risultati da 11 a 12 su 12
  1. #11
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,713
    Quote Originariamente inviata da cla123 Visualizza il messaggio
    Ciao skill83, ho riflettuto e vorrei chiederti... come posso trovare le foto che compongono l'immagine intera? cioè posso seguire dei riferimenti codici che li caratterizzano per trovarli? TE lo chiedo perché mi sembra il codice sia molto lungo. Thanks
    Ciao, come ti ha indicato skill83, puoi recuperare tutta la serie di immagini usando come modello quel link che ti è stato indicato, quindi sostituendo (per ottenere ogni singola immagine) i due numeri alla fine dell'url, con una serie di numeri da 0 a 8 per entrambe le "coordinate" (riga e colonna della griglia di immagini).

    Sostanzialmente l'immagine totale è realizzata creando una griglia di 9 immagini x 9. In totale ci sono 81 immagini che puoi recuperare attraverso quel link modello:
    https://d32dm0rphc51dk.cloudfront.ne...les/13/0_0.jpg

    dove 0_0 indica rispettivamente, prima riga e prima colonna in cui piazzare l'immagine per comporre la griglia.

    Va da se che 0_1 sarà l'immagine nella prima riga e seconda colonna, così 1_0 sarà quella della seconda riga e prima colonna, fino a 8_8, cioè l'ottantunesima immagine che sta nella nona riga e nona colonna.

    Chiaro che riassemblare manualmente il tutto è un lavoraccio anche per chi si destreggia con software di grafica.

    Personalmente la questione mi ha incuriosito e ho provato ad elaborare qualcosa che faccia il lavoro in automatico, dal momento che quegli URL sono comunque statici e accessibili senza particolari limitazioni.

    Non ho idea se ci siano diritti su quelle immagini; presumo di sì con eventuali limitazioni di utilizzo, ma questo ovviamente devi valutarlo tu.

    Qui posto un piccolo codice che è pssibile copiaincollare per creare una pagina .html da lanciare normalmente sul browser. Un po' di JavaScript andrà a ricuperare la serie di immagini ciclando gli indirizzi per ricreare la griglia. Tutte le immagini saranno quindi assemblate dentro un canvas e restituite come un'unica grande immagine che sarà possibile salvare attraverso il proprio browser, come una qualsiasi altra immagine.

    Qui il codice:
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
        <head>
            <title>Image of the people</title>
            <style>
                .loading {
                    background: #456;
                }
                .loading::before {
                    content: "Loading img " attr(data-count);
                    display: block;
                    padding: 100px 0;
                    width: 100%;
                    text-align: center;
                    color: #fff;
                }
            </style>
        </head>
        <body>
            <div id="container" class="loading" data-count="..."></div>
            <script>
            
                /* -------- SETTINGS -------- */
                
                 // URL di base. Usare i segnaposto {c} e {r} per identificare i punti in cui devono essere impostati i valori di colonna e riga
                var url = 'https://d32dm0rphc51dk.cloudfront.net/RwaWDF6u5JRYMSywRX25ww/dztiles/13/{c}_{r}.jpg';
                
                var cols = 9; // Totale delle colonne
                var rows = 9; // Totale delle righe
                
                // Schema URI usato per l'immagine finale. Per ottenere una immagine png, ad esempio, usare 'image/png'
                var uriSchemeImgOutput = 'image/jpeg';
                
                
                /* -------------------------- */
                
                var cnt = document.getElementById("container");
                var cnv = document.createElement("CANVAS");
                var ctx = cnv.getContext("2d");
                var count = 0;
                var arrimg = [];
                
                cnt.dataset.count = '0/' + (cols * rows);
    
                for (let r = 0; r<rows; r++){
                    for (let c = 0; c<cols; c++){
                        let img = new Image();
                        img.crossOrigin = "anonymous";
                        arrimg.push(img);
                        img.src = url.replace(/\{c\}/g, c).replace(/\{r\}/g, r);
                        img.onload = function() {
                            cnt.dataset.count = ++count + '/' + (cols * rows);
                            if (count == cols * rows) {
                                cnt.classList.remove('loading');
                                draw();
                            }
                        }
                    }
                }
                
                
                function draw(){
                    var firstImg = arrimg[0];
                    var lastImg = arrimg[cols * rows - 1];
                    
                    cnv.width = firstImg.width * (cols - 1) + lastImg.width;
                    cnv.height = firstImg.height * (rows - 1) + lastImg.height;
                    
                    arrimg.forEach((img,i)=>{
                        var x = firstImg.width * (i % cols);
                        var y = firstImg.height * Math.floor(i / cols);
                        var w = img.width;
                        var h = img.height;
    
                        ctx.drawImage(img, x, y, w, h);
                    });
                    let output = cnv.toDataURL(uriSchemeImgOutput);
                    cnt.innerHTML = '<img src="' + output + '">';
                }
                
            </script>
        </body>
    </html>
    Questo snippet funziona con qualsiasi sistema simile a questo; basterà impostare a dovere le quattro variabili commentate.

    Al momento tali variabili sono già impostate per questo specifico caso, per cui basterà lanciare la pagina e attendere che l'intera immagine venga creata.

    Per impostare altri URL (che usano lo stesso sistema) è possibile inserire opportunamente i segnaposto {c} e {r} che indicano rispettivamente colonna e riga, quindi, una volta definiti i valori di cols e rows (numero di colonne e di righe che compongono la griglia),
    lo script farà il lavoro sporco ciclando tutti gli URL ricomposti in modo iterativo.

    Provare per credere.

    Buon divertimento

    Quote Originariamente inviata da cla123
    si è decisamente arabo
    Chiaramente condivido

    Quote Originariamente inviata da ciro78 Visualizza il messaggio
    ti sposto in windows. non è js.
    Chiaramente non condivido
    tutto può sempre essere risolto con un po' di blablascript e un crodino... o forse era un brodino... boh
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  2. #12
    Utente di HTML.it L'avatar di skill83
    Registrato dal
    Mar 2002
    Messaggi
    2,024
    Come ti scrivevo su
    I quadranti sono tipo questo https://d32dm0rphc51dk.cloudfront.ne...les/13/5_7.jpg (vanno da 0_0.jpg a 8_8.jpg)
    ad ogni zoom dell'immagine carica nuovi "Tiles".
    In teoria cambiando 5_7, da 0_0 in poi fino ad arrivare a 8_8, dovresti riuscire a scaricarli tutti.
    Ti conviene copiare quell'url nel browser e cambiare manualmente, in maniera progressiva i numeri e scaricarti tutte le immagini (0_0, 0_1, 0_2, ..., 1_0, 1_1, ..., 8_1, ... 8_8)
    Poi ti metti con photoshop o qualcosa di simile e componi il puzzle

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.