| Konuyu görüntüle |
| Yazar |
|
omergok
kenderuntanbul
Kayıt: 21.02.2007 |
|
Merhaba arkadaşlar. Bir önizleme alanı gibi birşey yapmak istiyorum. Bu alanda da (tabloda) arkaplan resmini css ile background-Image: url(); şeklinde tutuyorum. Kullanıcı sayfasını düzenlerken orda şablon olarak görsün istiyorum ve arkaplana bir resim koyduğunda bu resmi ortalamak isterse yada resmi döşemek isterse diye bir seçeneğim var. Sorunum da tam burada oluyor. Şayet resimin boyutu benim oluşturduğum tablonun alanından büyükse resmi ortala dediğinde tablonun ebatları kadar arkaplan resmini koymak istiyorum. Ayrıca kullanıcı resmi döşemek isterse arkaplana bu sefer de resim daha da ufak olsun ve tablonun içinde döşenmiş bir şekilde görünsün istiyorum. Ama bu noktada hiç bir şey yapamıyorum. İnternette araştırdığım tüm javascript kodlar img tagının width ve heightini değiştirmekten başka bir şey yapamıyor. Server taraflı resimleri ufaltıp onları serverda tutmak da server'ı şişirecek. Böyle ufak bir işlem yüzden o yoldan da gitmek istemiyorum. Client taraflı bir işlemle o anlık önizleme olayını nasıl yaparım?
|
|
|
| Yazar |
|
burakkanmaz
Gaziantep
Kayıt: 02.10.2006 |
|
eğer php ile çalışıyorsan şöyle birşey işine yarayabilir,
ajax ile resmi (farzedelim ki) resize.php dosyasına gönderip thumb olarak sitene kaydedersin. (ajax olduğu için işlem çok kısa bir sürede gerçekleşir.) ve resmi ajax ile geri çağırıp hemen istediğin şekilde gösterirsin.
daha sonra belli süre aralıklarında (günde 1 mesela) filectime fonsiyonu ile resimleri tararsın, oluşturulma tarihleri (1 günü) geçmiş resimleri silersin. (bu sayede server da yer konusunda yoğunlukta olmaz)
filectime fonksiyonu : http://tr.php.net/manual/en/function.filectime.php
|
|
|
| Yazar |
|
omergok
kenderuntanbul
Kayıt: 21.02.2007 |
|
işin server tarafına girerek yapılabileceğini zaten biliyorum yaparım da ama ben server taraflı olmasını istemiyorum client taraflı bir işlem yapmak istiyorum.
|
|
|
| Yazar |
|
burakkanmaz
Gaziantep
Kayıt: 02.10.2006 |
|
bu server a fazla yük getirmez gibi ama yine de sen bilirsin. ben bugüne kadar javascriptle böyle birşey yapıldığını görmedim. umarım yapabilen vardır, bende merak ettim şimdi bu işi client taraflı nasıl yapabileceğimizi.
|
|
|
| Yazar |
|
orhan
istanbul
admin
Kayıt: 17.11.2005 |
|
bende boyle bir script var idi javascript ile resmi seçip php ile crop ediyordu aramam lazım bulursan koyarım buraya
N/A
|
|
|
| Yazar |
|
kellad
istanbul
Kayıt: 21.01.2006 |
|
Ben bir syfa bulmuştum sana istediğin resmi istediğin boyutta döndürüyordu sayfanın içine istediğin yere koy. Sunucuya da kaydetmeden. Ben de biraz arayım bulunca gönderirim.
Decompiling the code of universe.
Listening the cosmic background radiation.
Swimming in Inter Stellar Medium.
|
|
|
| Yazar |
|
kellad
istanbul
Kayıt: 21.01.2006 |
|
http://www.codeproject.com/info/search.asp?cats=3,4,6&searchkw=image+resizing&sd=15%20Nov%201999&ed=15%20Aug%202007&Page=1
Bu linkte birşeyler var. Daha önce bulduğum çok güzeldi ama onu tekrar bulamadım.
Decompiling the code of universe.
Listening the cosmic background radiation.
Swimming in Inter Stellar Medium.
|
|
|
| Yazar |
|
omergok
kenderuntanbul
Kayıt: 21.02.2007 |
|
client taraflı bir çözüm bulabilirseniz sevineceğim yoksa mecbur server tarafına geçeceğim.
burak sana cevaben de şunu söyleyim bu kodu kullanacağım yerde server'ın alan sorunu yok ama aynı işlemi farzetki kotalı bir sitede uygulaman gerekiyor. siteye gelen resimlerin senin kotanı bir kaç ay içinde doldurması kaçınılmaz olur. ayrıca bantgenişliği sınırlamasını da unutmamak gerekir.
orhan abi o kod resimi php taraflı kesiyor demiştin yine server'da küçültülmüş hali mi tutuluyor?
|
|
|
| Yazar |
|
burakkanmaz
Gaziantep
Kayıt: 02.10.2006 |
|
omergok yazdi | | client taraflı bir çözüm bulabilirseniz sevineceğim yoksa mecbur server tarafına geçeceğim.
burak sana cevaben de şunu söyleyim bu kodu kullanacağım yerde server'ın alan sorunu yok ama aynı işlemi farzetki kotalı bir sitede uygulaman gerekiyor. siteye gelen resimlerin senin kotanı bir kaç ay içinde doldurması kaçınılmaz olur. ayrıca bantgenişliği sınırlamasını da unutmamak gerekir. |
ben orhan ve kellad ın mesaj yazdığını görünce ahanda örenicem dedim ama onlarınki de server taraflıydı 
anladım. zaten iyi bir sistemin en önemli özelliği az sistem kaynağını kullanmasıdır.
ama kotadan kastın alan ise, dediğim yol sorun olmaz gibi görünüyor. yani ben resimleri cookie tarzı düşündüm. 24 saat süresi geçen otomatik silinecek serverdan. bu sayede alan boşalacak. (yani birkaç ay olsa bile yığılma olmayacak) ama tabi client taraflı bulursan bu daha iyi olur  kolay gelsin, zor bi konu 
|
|
|
| Yazar |
|
kellad
istanbul
Kayıt: 21.01.2006 |
|
Bu işlemi söylediğin tarzda istemcide yapmak çok zor bence. Script ile imkansız. İstemciye bu işi yapan bir program yada applet yüklersen ona yaptırabilirsin ama ona da değmez bence.
Ayrıca yer kaygın versa küçültülmüş resmi sunucuda kalıcı tutmak zorunda değilsin. Bu sefer de işlem yoğunluğun artar tabi. Aynı resmi tekrar tekrar küçültmen gerekir. Eğer kaydedersen bu işlemi 1 kere yaparsın.
Bence sunucunun yükünü o kadar da azaltmaya zorlamayın. Bunun gibi bazı işlemleri istemci tarafında yaptırmak web sitesini daha da yavaşlatabilir. Tabi bu sitenin yoğunluğuna da bağlı. Sunucuların istemcilerden kat kat güçlü olduğunu unutmayın.
Sistem mimarini gözden geçirirsen daha etkili yöntemler bulabilirsin bence. Ne istendiğini en iyi sen anlarsın. Ona göre en uygun orta yollu bir çözüm bulabilirsin.
Decompiling the code of universe.
Listening the cosmic background radiation.
Swimming in Inter Stellar Medium.
|
|
|
| Yazar |
|
orhan
istanbul
admin
Kayıt: 17.11.2005 |
|
http://www.iucoders.com/attachments/cropper.zip
bu js ile resmin ne kadarını seçersen okadarının koordinatlarıı servera yollayıp ordan resmin gerekli kısmını alabilirsin.
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
demo
http://www.defusion.org.uk/demos/060519/cropper.php
N/A
|
|
|
| Yazar |
|
aliprinter
İstanbul
Kayıt: 12.02.2006 |
|
Sana teknolojiden bir adım önde ilerlediğini söylemiştim.
İstediğin işlemi client-side gerçekleştirmek istiyorsan CSS'in background-size gibi bir propery'e sahip olması gerekiyordu. Ancak senin de bulamadığın gibi böyle bir property yoktu. Nasıl olmaz filan diye bir araştırma yaptım ve gördüm ki CSS3'te seni düşünmüşler ve böyle bir propery (ve tabi ek olarak birçok yenilik) koymuşlar. Ne varki çok sevdiğimiz IE (IE7'de denemedim), Firefox (v2.0.0.6) desteklemiyorlar şu anda. Opera'da da denemedim. Yalnız Safari'de çalışıyor şimdilik. Bu yüzden aşağıda anlatacağım özelliği denemek için Apple Safari 3 Public Beta Download: http://www.apple.com/safari/download/
Şimdi gelelim CSS kodumuza:
.BGChange
{
background: url('output.jpg');
-webkit-background-size: 200px 50px;
-khtml-background-size: 200px 50px;
background-repeat: no-repeat;
}
Kullanımı: <td width="200" valign="top" class="BGChange" id="BGPreview"> gibi...
BGChange class'ımızın ismi, background ile arkaplan resmimizi seçtik, -webkit-background-size ve -khtml-background-size özellikleriyle de arkaplan resmimizin genişliğini 200px, yüksekliğini ise 50px olarak belirledik. background-repeat ile de arkaplan resmini tekrarsız yaptık.
Sayfamıza uygulayıp kaydedip Safari'de açtığımızda arkaplan reminin orjinal genişliğinin ve yüksekliğinin ne olursa olsun bizim belirlediğimiz boyutlarda göründüğünü göreceğiz. IE ve Firefox'da ise bunu değil, resmin orjinal boyutu neyse o şekilde göründüğünü göreceğiz desteklemediği için şimdilik.
Yeni background-origin ve background-clip özellikleriyle de resmin pozisyonunu daha detaylı olarak ayarlayabilirsin.
Son olarak eğer kullanıcı tablonun hücre genişliği yada yüksekliğinden daha geniş bir arkaplan resmi seçerse JavaScript ile bunu kontrol edip yine JavaScript ile bu style özelliklerini kullanarak istemci taraflı değişiklik yapıp önizleme olarak gösterebilirsin anlık olarak.
Tabi bir de bu özelliklerin popüler tarayıcılar tarafından desteklenmesini de beklemek durumundasın. Safari ile nereye kadar :) Yoksa sayfanın altına "bu site en iyi Safari browser ve 1024x768 çözünürlükte görüntülenebilir..." diye bir not koyman gekebilir 
Referanslar:
http://www.w3.org/TR/css3-background/
http://www.w3.org/TR/css3-background/#the-background-size
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
http://www.css3.info/preview/
http://www.css3.info/preview/background-size.html (Safari ile açmılmalı örneğin düzgün görünmesi için)
http://www.css3.info/preview/background-origin-and-background-clip.html (Safari ile açmılmalı örneğin düzgün görünmesi için)
|
|
|
| Yazar |
|
burakkanmaz
Gaziantep
Kayıt: 02.10.2006 |
|
aliprinter yazdi | | | Ne varki çok sevdiğimiz IE (IE7'de denemedim) |
ie7 de çalışmıyor. ff2.0.0.6 da da dediğin gibi çalışmıyor. 
omergok bence sen bu işi server taraflı yap çünkü hali hazırda daha ie6 kullananlar ie7 ye bile geçmemişken sen bunu ie8(olacağı bile garanti değil) de yapmayı hiç düşünme. siteni her zaman uzman kullanıcılar kullanmayacaksa server taraflı yapmak daha mantıklı (hala cookie yöntemi ile resmi 24 saatte bir silme taraftarıyım )
|
|
|
| Yazar |
|
omergok
kenderuntanbul
Kayıt: 21.02.2007 |
|
işte aradığım şey tam olarak buydu. eyvallah ali çok sağol (:
sadece safaride olması kötü ama artık diğer tarayıcıların da buna uyumlu olmasını beklemekten başka çare kalmadı.
yardımcı olmaya çalışan herkese teşekkürler.
|
|
|
| Yazar |
|
omergok
kenderuntanbul
Kayıt: 21.02.2007 |
|
Türkçe kaynak isteyenler için;
http://www.muhammetsevim.com/yazi/css3-ve-guzellikleri/
|
|
|
|
|
-
 Del.icio.us
-
 Digg
-
 Facebook
-
 Furl
-
 Google
-
 Blink
-
 Simpy
-
 Spurl
-
 Y! MyWeb
|
|
| | | | | | | | | | | | | | |
