Autor Zpráva
Fisak
Profil
Dobrý den. Vím že jde spojit více obrázků v jeden velký obrázek pomocí PHP. Jenže chci pospojovat obrázek z obrázků 50x50px a tento obrázek by měl 20x20 kostiček. V praxi to znamená že PHP skript by se mi načítal několik desítek vteřin. Tomu chci zabránit a zkusit to pomocí jquery nebo JS. Nevěděl by někdo o nějakém užitečném návodě? Nebo přímo jak se toto řeší? Předem děkuji za odpovědi.
juriad
Profil
vytvoř html tabulku 20x20 a do každé buňky vlož jeden obrázek
Fisak
Profil
juriad:
to nebude fungovat .. potřebuju to pak dát do bacground: url("...");
margin
Profil *
Obrázky se berou odkud a podle jakých povidel se mají malé obrázky poskládat do velkého?
20×20 to je 400 http požadavků, pokud každá obrázek bude jiný a budeš je tahat ze serveru do prohlížeče.

Nebo přímo jak se toto řeší?
Nevím co chceš řešit, můžeš prozradit více?

juriad:
To raději DIV 1000px ×1000px a obrázkům dát float.
Fisak
Profil
margin:
Ne chci tyto obrázky spojit v jeden obrázek a pak ho dát do background: url("obrazek.png"); a stačí mi příklad 4x4 obrázky tzn.
images-1.gif, images-2.gif, images-3.gif, images-4.gif,
images-5.gif, images-6.gif, images-7.gif, images-8.gif,
images-9.gif, images-10.gif, images-11.gif, images-12.gif,
images-13.gif, images-14.gif, images-15.gif, images-16.gif,
Radek9
Profil
Fisak:
Na to stejně potřebuješ serverový script. ;-) Teoreticky by to i nějak mohlo jít přes canvas a data v src, ale tam se můžeš rovnou rozloučit s podporou pro starší prohlížeče. A bylo by to podle mě ještě pomalejší než to PHP.

Je ale nutné to opravdu slučovat do jednoho obrázku? Nedalo by se to vyřešit napozicováním?
peta
Profil
canvas - priklad pro 2 obrazky (pripadne si najdi googlem)
https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images
<img id="source" src="/files/4533/rhino.jpg" width="300" height="227" alt="" style="display:none">
<img id="frame" src="/files/242/Canvas_picture_frame.png" width="132" height="150" alt="" style="display:none">
<canvas id="canvas" style="width:500px;height:500px;"></canvas>
<script>
//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
 
  // Draw slice
  ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104);
 
  // Draw frame
  ctx.drawImage(document.getElementById('frame'),0,0);
}
draw();
</script>

Ale je ti jasne, ze kdyz obrazky budes tahat ze serveru po jednom, tak ke kazdemu pridavas asi 1k hlavicku, navic, prerusujes pokazde prenos, coz je o moc horsi nez vyrobit obrazek. Cekani na 400 obrazku muze byt pro uzivatele opravdovym zazitkem.
Mozna by to slo omezit pres ulozeni jako base64 (viz link).
Nebo bys treba mohl vyuzit google map api.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: