| Autor | Zpráva | ||
|---|---|---|---|
| Fisak Profil |
#1 · Zasláno: 29. 4. 2013, 16:03:03
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 |
#2 · Zasláno: 29. 4. 2013, 16:10:12
vytvoř html tabulku 20x20 a do každé buňky vlož jeden obrázek
|
||
| Fisak Profil |
#3 · Zasláno: 29. 4. 2013, 16:21:17
juriad:
to nebude fungovat .. potřebuju to pak dát do bacground: url("..."); |
||
| margin Profil * |
#4 · Zasláno: 29. 4. 2013, 16:24:30
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 |
#5 · Zasláno: 29. 4. 2013, 16:28:56
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 |
#7 · Zasláno: 30. 4. 2013, 08:51:09
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. |
||
|
Časová prodleva: 11 let
|
|||
0