Αυτόματο Image Resize

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
lakritidis
Δημοσιεύσεις: 401
Εγγραφή: 04 Αύγ 2005 14:35
Τοποθεσία: Katerini
Επικοινωνία:

Αυτόματο Image Resize

Δημοσίευση από lakritidis » 29 Αύγ 2007 14:28

Έχουμε μία σελίδα στην οποία δείχνουμε πολλές τυχαίες εικόνες από άλλα site.

Οι διαστάσεις των εικόνων είναι επίσης τυχαίες. Θέλουμε οι διαστάσεις των εικόνων να μην ξεπερνούν ένα συγκεκριμένο όριο, ώστε να μην ξεχειλώνει το layout της σελίδας μας.

Αυτό το javascript κομμάτι περιορίζει το width στα 150 και το height στα 100.

Κώδικας: Επιλογή όλων

function setDimensions(image) {
	if (image.width > image.height) {
		if (image.width > 150) { image.width = 150 };
		if (image.height > 100) { image.height = 100 };
	} else {
		if (image.height > 100) { image.height = 100 };
		if (image.width > 150) { image.width = 150 };
	}
}
και στον html κώδικα

Κώδικας: Επιλογή όλων

<img src="RandomPath" border="0" onload="setDimensions&#40;this&#41;;" />
Με τον τρόπο αυτό όμως, πρώτα κατεβαίνει η εικόνα στις πραγματικές της διαστάσεις (ή ένα σημαντικό τμήμα της εικόνας) και στη συνέχεια γίνεται το resize, με αποτέλεσμα το layout να "τινάζεται" δεξιά-αριστερά κατά το φόρτωμα.

Δοκίμασα και άλλες μεθόδους χωρίς αποτέλεσμα. Πχ κατά το φόρτωμα της σελίδας να κάνω preload τις εικόνες.

Κώδικας: Επιλογή όλων

<body onload="preload&#40;&#41;;">
Επίσης μέσω της php υπάρχει η getimagesize() που επιστρέφει σε πίνακα τις διαστάσεις της εικόνας. Με τον τρόπο αυτό μπορούμε να διαβάσουμε την εικόνα, να υπολογίσουμε τις επιθυμητές διαστάσεις και να τις βάλουμε απευθείας στο width και height της εικόνας. Ο τρόπος αυτός όμως καθυστερεί απελπιστικά.

Καμιά βοήθεια;

Άβαταρ μέλους
KGP
Honorary Member
Δημοσιεύσεις: 5857
Εγγραφή: 18 Ιούλ 2002 01:50
Τοποθεσία: Mr Wonderful

Αυτόματο Image Resize

Δημοσίευση από KGP » 06 Σεπ 2007 04:30

hmmm, giati den tis kaneis resize topika ston server?

btw ascheto kotiazontas tin imeromina tou post sou ....oi "edomesa eidikoi" akoma gia mpania leipoune? hahahaha
*Στην Ελλάδα δεν χρειάζεται να σκέφτεσαι...χάνεις πολύτιμο χρόνο!
*"The power of accurate observation is frequently called cynicism by those who don't have it." -George Bernard Shaw (1856-1950)
*The purpose of argument should not be victory, but progress.

jimvrasna
Δημοσιεύσεις: 48
Εγγραφή: 21 Απρ 2006 23:57
Τοποθεσία: ΜΑΚΡΙΑ ΜΑΚΡΙΑ
Επικοινωνία:

Αυτόματο Image Resize

Δημοσίευση από jimvrasna » 10 Σεπ 2007 12:11

γιατι δεν δοκιμαζεις

Κώδικας: Επιλογή όλων

<img width="150" height="150" src="a.jpg" border="0" onload="funct&#40;this&#41;;"/> 
αλλη λύση δεν βλέπω!!!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αυτόματο Image Resize

Δημοσίευση από skeftomilos » 10 Σεπ 2007 12:34

Μπορείς να βάλεις τις εικόνες σε ένα div με συγκεκριμένες διαστάσεις, και overflow:hidden. Προσωπικά προτιμώ να φτιάχνω δυναμικά (on the fly) τα thumbnails, για να μη χαλάει και το aspect ratio.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

lakritidis
Δημοσιεύσεις: 401
Εγγραφή: 04 Αύγ 2005 14:35
Τοποθεσία: Katerini
Επικοινωνία:

Αυτόματο Image Resize

Δημοσίευση από lakritidis » 10 Σεπ 2007 21:20

Congrats skeftomyle! Δούλεψε τέλεια!

Να πω επίσης ότι η function που έδωσα δε δουλέυει σωστά. Θα μετατρέψει μια εικόνα πχ 500x500 σε 150x100 κάτι που φυσικά είναι λάθος αφού χαλάει το aspect ratio. H παρακάτω function διορθώνει το πρόβλημα. Αρχικά θα κάνει resize στα 150x150 και επειδή το height ξεπερνάει το όριο, θα κάνει και δεύτερο resize στα 100x100

Κώδικας: Επιλογή όλων

function setDimensions&#40;imageid, image, WidthLimit, HeightLimit&#41; &#123;
	document.getElementById&#40;imageid&#41;.style.display = 'none';
	ImageWidth = image.width;
	ImageHeight = image.height;
	if &#40;ImageWidth > ImageHeight&#41; &#123;
		if &#40;ImageWidth >= WidthLimit&#41; &#123;
			ScaleFactor = WidthLimit / ImageWidth;
			ImageWidth = Math.round&#40;ImageWidth * ScaleFactor&#41;;
			ImageHeight = Math.round&#40;ImageHeight * ScaleFactor&#41;;
			if &#40;ImageHeight > HeightLimit&#41; &#123;
				NewScaleFactor = HeightLimit / ImageHeight;
				ImageWidth = Math.round&#40;ImageWidth * NewScaleFactor&#41;;
				ImageHeight = Math.round&#40;ImageHeight * NewScaleFactor&#41;;
			&#125;
		&#125;
	&#125; else &#123;
		if &#40;ImageHeight > HeightLimit&#41; &#123;
			ScaleFactor = HeightLimit / ImageHeight;
			ImageWidth = Math.round&#40;ImageWidth * ScaleFactor&#41;;
			ImageHeight = Math.round&#40;ImageHeight * ScaleFactor&#41;;
			if &#40;ImageWidth > WidthLimit&#41; &#123;
				NewScaleFactor = WidthLimit / ImageWidth;
				ImageWidth = Math.round&#40;ImageWidth * NewScaleFactor&#41;;
				ImageHeight = Math.round&#40;ImageHeight * NewScaleFactor&#41;;
			&#125;
		&#125;
	&#125;
	image.width = ImageWidth;
	image.height = ImageHeight;
&#125;
Μία άλλη προσέγγιση που δούλεψε σε Firefox αλλά όχι σε IE ήταν να δίνω αρχικά στις εικόνες style="display:none" και στην τελευταία γραμμή τις function να κάνω display:block.

Το display από none σε block δε δούλευε σε ΙΕ, ενώ το visibility (hidden/visible) παραδόξως δούλευε κανονικά!

Anyway, skeftomyle thanx a lot.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αυτόματο Image Resize

Δημοσίευση από skeftomilos » 10 Σεπ 2007 21:41

Αν δε μπορείς να αποφύγεις το πείραγμα των διαστάσεις των εικόνων, τότε τουλάχιστον άλλαζε μόνο τη μία από τις δύο διαστάσεις, δήλαδή ή το πλάτος ή το ύψος. Η άλλη διάσταση θα αλλάξει αυτόματα κα το aspect-ratio θα διατηρηθεί.

Επίσης τα img είναι inline elements - όχι block - οπότε μπορείς να δοκιμάσεις το style.display='inline' αντί για style.display='block', ή ακόμα και style.display='' σε ορισμένες περιπτώσεις.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

lakritidis
Δημοσιεύσεις: 401
Εγγραφή: 04 Αύγ 2005 14:35
Τοποθεσία: Katerini
Επικοινωνία:

Αυτόματο Image Resize

Δημοσίευση από lakritidis » 10 Σεπ 2007 22:56

Ναι σωστό είναι αυτό που λες, αλλά δυστυψώς στην περίπτωση μου δεν είναι βολικό.

1. Ορίζουμε πχ width limit 150 και αφήνουμε το height ελεύθερο. Τότε πχ μια εικόνα 150x300 θα παραμείνει 150x300.

2. Ορίζουμε height limit 100 και αφήνουμε το width ελεύθερο. Τότε μια εικόνα 300x100 θα παραμέινει 300x100.

H function που δίνω (και που καλείται στο <img onload=....>) λύνει το πρόβλημα, φτιάχνοντας στη μεν πρώτη περίπτωση ένα thumb 50x100, στη δε δεύτερη ένα thumbnail 150x50.

To τελευταίο που λες για το display inline δεν το ήξερα. Είναι άλλη μια χρήσιμη πληροφορία.

Thanx pal.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αυτόματο Image Resize

Δημοσίευση από skeftomilos » 10 Σεπ 2007 23:05

Μπορεί να γίνει το εξής. Υπολογίζουμε την αναλογία cW = Κανονικό_Πλάτος / Μέγιστο_Πλάτος και την αναλογία cH = Κανονικό_Ύψος / Μέγιστο_Ύψος. Αν είναι και οι δύο μικρότερες της μονάδας δεν κάνουμε τίποτα. Διαφορετικά κοιτάμε ποια από της δύο αναλογίες είναι μεγαλύτερη από την άλλη, και ανάλογα ορίζουμε το πλάτος ή το ύψος της εικόνας.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

lakritidis
Δημοσιεύσεις: 401
Εγγραφή: 04 Αύγ 2005 14:35
Τοποθεσία: Katerini
Επικοινωνία:

Αυτόματο Image Resize

Δημοσίευση από lakritidis » 10 Σεπ 2007 23:07

Κοίτα πώς δούλεψε με τη βοήθεια σου:

Έχουμε στο head τη function setDimensions και καλούμε τις εικόνες έτσι

Κώδικας: Επιλογή όλων

<div style="overflow&#58;hidden; width&#58;150; height&#58;100">
<img id="img1" border="0" onload="setDimensions&#40;'img1', this, 150, 100&#41;;" />
</div>
Edit: Αν παρατηρήσεις τη setDimensions() κάνει ακριβώς αυτό που προτείνεις.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Αυτόματο Image Resize

Δημοσίευση από skeftomilos » 10 Σεπ 2007 23:29

Καλό είναι να δωθεί μονάδα μέτρησης στις διαστάσεις:

Κώδικας: Επιλογή όλων

<div style="overflow&#58;hidden;width&#58;150px;height&#58;100px">
Το 'img1' γιατί το περνάς στα arguments; Αφού έχεις το this.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

lakritidis
Δημοσιεύσεις: 401
Εγγραφή: 04 Αύγ 2005 14:35
Τοποθεσία: Katerini
Επικοινωνία:

Αυτόματο Image Resize

Δημοσίευση από lakritidis » 10 Σεπ 2007 23:39

Ειναι 'κατάλοιπο' από τα πειράματα. Πρέπει να φύγει...

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης