Originariamente inviata da
cla123
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 
Originariamente inviata da
cla123
si è decisamente arabo
Chiaramente condivido 
Originariamente inviata da
ciro78
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 
Rispondi quotando
