Smooth image με averaging

[zn2709]

Καλημέρα παιδιά, να πω καταρχήν πως δεν ξέρω αν το θέμα το άνοιξα στην σωστή κατηγορία και ζητάω συγγνώμη απο τους mod αν έκανα λάθος..

Το πρόβλημα μου είναι το εξής..Έχουμε μια εργασία στη σχολή στην οποία πρέπει να στήσουμε ενα site χρησιμοποιώντας html css και javascript..Όλα καλά με το site και μου έχει μείνει ένα ερώτηαμ το οποίο δεν καταλαβαίνω καν τι εννοεί.Ρώτησα τον καθηγητή μέσω mail αλλά ακόμα τίποτα..

Λοιπον..Κάπου μέσα στην ιστοσελίδα, πρέπει να έχουμε ένα κουμπι απο το οποίο ο χρήστης θα ανεβάζει μια εικόνα και εμείς πρέπει να την επεξεργαζόμαστε κατάλληλα με τον εξής τρόπο.."Το ζητούμενο είναι η εξομάλυνση (smoothing) της εικόνας μέσω της διαδικασίας averaging. Συγκεκριμένα, για κάθε pixel της εικόνας, και για κάθε μία από τις τρεις τιμές RGB πρέπει να υπολογιστεί η τιμή του μέσου όρου των γειτονικών pixel ("γειτονιά" 3Χ3), η οποία θα αντικαταστήσει την αρχική τιμή.

Για παράδειγμα αν στο κανάλι R είχαμε τις τιμές:

το αποτέλεσμα θα ήταν να αντικατασταθεί η τιμή 125 με τον αριθμητικό μέσο της γειτονιάς δηλαδή με την τιμή (123+34+56+111+125+254+234+240+218)/9 (στρογγυλοποιημένη στον πλησιέστερο ακέραιο). Προσοχή στα συνοριακά pixels καθώς η γειτονιά είναι μικρότερη!"

 

Αυτή είναι η εκφώνηση..Παιδιά δεν ζητάω να μου λύσετε την άσκηση απλά λίγη βοήθεια γιατί έχω φάει τα μάτια μου..Ίσως είναι εύκολο αλλά είναι η πρώτη μου επαφή με τέτοιες γλώσσες και έτσι δυσκολεύομαι..

Ευχαριστώ εκ των προτέρων για τη βοήθεια!

 

Και συγγνώμη για το μεγάλο θέμα αλλά προσπάθησα να είμαι αναλυτικός για να βοηθήσω κ όσους ασχολήθουν και τους ευχαριστώ! ελπίζω να υπάρξει λύση!

[x_maras]

Σκέψου ότι έχεις ένα μεγάλο πίνακα, ας πούμε 16x16 (η εικόνα σου) και ένα μικρό 3x3 (το φίλτρο σου) τοποθέτησε στο κέντρο το κεντρικό κελί του φίλτρου σου στο πρώτο κελί του πίνακα και βρες το average των των υπόλοιπων κελιών.

Κάποια δε θα έχουν τιμή(εκτός ορίων). Μία λύση σε αυτό το πρόβλημα είναι να τοποθετήσεις 0 γύρω απο το πίνακά σου.

 

>
5 5 5 5 5           0 0 0 0 0 0 0
3 4 5 8 9           0 5 5 5 5 5 0
2 3 9 9 9           0 3 4 5 8 9 0 
1 2 3 4 5           0 2 3 9 9 9 0
9 2 1 2 1           0 1 2 3 4 5 0
                   0 9 2 1 2 1 0
                   0 0 0 0 0 0 0

 

Τώρα μπορείς να σύρεις τη μάσκα σου χωρίς πρόβλημα.

τοποθετείς το πάνω αριστερό κελί της μάσκας σου στο πρώτο κελί της νέας εικόνας και σταματάς όταν το κάτω δεξιά πατήσεις στο τελευταίο κελί της εικόνας. Επίσης αλλάζεις σειρά όταν το πάνω δεξιά πατήσει πάνω στο τελευταίο κελί της γραμμής, etc.

 

Στο τέλος αφαιρείς τα 0 που τοποθέτησες γύρω γύρω και έχεις την τελική εικόνα σου

 

Δες εδώ πως γινεται

Επίσης αυτό το site με βοήθησε να περάσω image processing

[zn2709]

Σκέψου ότι έχεις ένα μεγάλο πίνακα, ας πούμε 16x16 (η εικόνα σου) και ένα μικρό 3x3 (το φίλτρο σου) τοποθέτησε στο κέντρο το κεντρικό κελί του φίλτρου σου στο πρώτο κελί του πίνακα και βρες το average των των υπόλοιπων κελιών.

Κάποια δε θα έχουν τιμή(εκτός ορίων). Μία λύση σε αυτό το πρόβλημα είναι να τοποθετήσεις 0 γύρω απο το πίνακά σου.

 

>
5 5 5 5 5           0 0 0 0 0 0 0
3 4 5 8 9           0 5 5 5 5 5 0
2 3 9 9 9           0 3 4 5 8 9 0 
1 2 3 4 5           0 2 3 9 9 9 0
9 2 1 2 1           0 1 2 3 4 5 0
                   0 9 2 1 2 1 0
                   0 0 0 0 0 0 0

 

Τώρα μπορείς να σύρεις τη μάσκα σου χωρίς πρόβλημα.

τοποθετείς το πάνω αριστερό κελί της μάσκας σου στο πρώτο κελί της νέας εικόνας και σταματάς όταν το κάτω δεξιά πατήσεις στο τελευταίο κελί της εικόνας. Επίσης αλλάζεις σειρά όταν το πάνω δεξιά πατήσει πάνω στο τελευταίο κελί της γραμμής, etc.

 

Στο τέλος αφαιρείς τα 0 που τοποθέτησες γύρω γύρω και έχεις την τελική εικόνα σου

 

Δες εδώ πως γινεται

Επίσης αυτό το site με βοήθησε να περάσω image processing

 

 

Καταρχήν ευχαριστώ για την απάντηση σου αν και προς το παρών έχω καταλάβει λίγα πράγματα..αρχικά, αυτό που θα ήθελα να σε ρωτήσω είναι το εξής, αυτό πρέπει να το κάνω με κώδικα javascript?

[x_maras]

ναι με javascript στη περίπτωση σου.

Η λογική όμως δεν αλλάζει ... δεν έχει σημασία με ποια γλώσσα θα το γράψεις ο αλγόριθμος είναι ο ίδιος. To active pixel σου είναι το μεσαίο (x,y) και κινήσαι στα τριγύρω βρίσκοντας το average [(x-1, y-1) + (x, y-1) + (x+1, y-1) + ... + (x+1, y+1)]/9

[zn2709]

ναι με javascript στη περίπτωση σου.

Η λογική όμως δεν αλλάζει ... δεν έχει σημασία με ποια γλώσσα θα το γράψεις ο αλγόριθμος είναι ο ίδιος. To active pixel σου είναι το μεσαίο (x,y) και κινήσαι στα τριγύρω βρίσκοντας το average [(x-1, y-1) + (x, y-1) + (x+1, y-1) + ... + (x+1, y+1)]/9

 

Αρχίζω και ψιλοκαταλαβαίνω..Δηλαδή αυτό που πρέπει να κάνω είναι: Δημιουργώ ένα κουμπί με το οποίο κάποιος χρήστης επιλέγει μια φωτογραφία απο τον δίσκο του και μετά την στέλνω στο javascript για να περαστεί απο την όλη αυτή διαδικασία? 1000 ευχαριστώ και σορρυ για το πρήξιμο..:/

[x_maras]

Αρχίζω και ψιλοκαταλαβαίνω..Δηλαδή αυτό που πρέπει να κάνω είναι: Δημιουργώ ένα κουμπί με το οποίο κάποιος χρήστης επιλέγει μια φωτογραφία απο τον δίσκο του και μετά την στέλνω στο javascript για να περαστεί απο την όλη αυτή διαδικασία? 1000 ευχαριστώ και σορρυ για το πρήξιμο..:/

 

Τίποτα

απλά να ξέρεις ότι θα πρέπει να μετατρέψεις την εικονα σε 2d matrix πρώτα. Λογικά θα υπάρχουν κάποια έτοιμα functions σε javascript.

[zn2709]

Οκ θα ψάξω! Ευχαριστώ ξανά και παίζει να σε ξαναχρειαστώ :Ρ

[zn2709]

Τίποτα

απλά να ξέρεις ότι θα πρέπει να μετατρέψεις την εικονα σε 2d matrix πρώτα. Λογικά θα υπάρχουν κάποια έτοιμα functions σε javascript.

 

 

Δεν έχω καταφέρει τίποτα και έχω αρχίσει να απογοητεύομαι..:/

Καταρχήν χρησιμοποιώ αυτό

>
<form action="/" method="post" onsubmit="return upload();">
 <fieldset>
   <legend>Upload photo</legend>
   <input type="file" name="photo" id="photo">
   <input type="submit" value="Upload">
   <hr>
   <img src="" alt="Image preview" id="preview">
 </fieldset>
</form>

για να ζητήσω από τον χρήστη να ανεβάσει εικόνα..Αυτό που δεν καταλαβαίνω εδώ είναι πως όταν πατάω το upload μ βγάζει στο directory "file:///C:/".. Τι κάνω λάθος? Και φαντάσου, ακόμα δεν έχω φτάσει στην επεξεργασία της εικόνας! :/

[computeras13]

Βασικά με javascript μόνο δεν μπορείς να κάνεις upload αρχείο. Σε τι γράφεις για να βοηθήσουμε περισσότερο; PHP, .NET, plain HTML?

[zn2709]

Βασικά με javascript μόνο δεν μπορείς να κάνεις upload αρχείο. Σε τι γράφεις για να βοηθήσουμε περισσότερο; PHP, .NET, plain HTML?

 

ολο το σαιτ ειναι σε html κ χρησιμοποιω κ css π δν νομιζω να παιζει ρολο..αν θελετε ανεβαζω κ συμπιεσμενο το site τον κωδικα.. ευχαριστω για τισ απαντησεις

[computeras13]

Ένας τρόπος είναι να χρησιμοποιήσεις PHP. Μπορείς να δεις το πως εδώ.

[zn2709]

Ένας τρόπος είναι να χρησιμοποιήσεις PHP. Μπορείς να δεις το πως εδώ.

 

Θα κάνω την φόρμα upload με php..Οκ..απλά το site δεν θα ανέβει κάπου..παίζει ρόλο? ευχαριστώ

[zn2709]

Ένας τρόπος είναι να χρησιμοποιήσεις PHP. Μπορείς να δεις το πως εδώ.

 

Κάνω την φόρμα σε php αλλά δεν μου εμφανίζει τα αποτελέσματα που έχει αλλά μου εμφανίζει τον κώδικα του php αρχείου..:/κάτι κάνω λάθος, δεν εξηγείται αλλιώς!

Δώστε μου τα φώτα σας

[computeras13]

Πρέπει να έχεις εγκατεστημένη PHP στο μηχάνημα που τρέχει η σελίδα. Δοκίμασε να κάνεις μια εγκατάσταση το xampp.

[zn2709]

Πρέπει να έχεις εγκατεστημένη PHP στο μηχάνημα που τρέχει η σελίδα. Δοκίμασε να κάνεις μια εγκατάσταση το xampp.

 

το έχω κάνει ήδη..με το συγκεκριμένο script

><script type="text/javascript">
var maxWidth=100;
 // height to resize large images to
var maxHeight=100;
 // valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
 // the id of the preview image tag
var outImage="previewField";
 // what to display when the image is not valid
var defaultPic="spacer.gif";
/***** DO NOT EDIT BELOW *****/
function preview(what){
 var source=what.value;
 var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
 for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
 globalPic=new Image();
 if (i<fileTypes.length) globalPic.src=source;
 else {
   globalPic.src=defaultPic;
   alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
 }
 setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
 var field=document.getElementById(outImage);
 var x=parseInt(globalPic.width);
 var y=parseInt(globalPic.height);
 if (x>maxWidth) {
   y*=maxWidth/x;
   x=maxWidth;
 }
 if (y>maxHeight) {
   x*=maxHeight/y;
   y=maxHeight;
 }
 field.style.display=(x<1 || y<1)?"none":"";
 field.src=globalPic.src;
 field.width=x;
 field.height=y;
}


// End -->


</script>

<center> Δες μία εικόνα απο τον σκληρό σου δίσκο στον browser σου! <br>
ΠΡΟΣΟΧΗ!! Λειτουργεί μόνο σε Internet Explorer. </center>
<div align="center" style="line-height: 1.9em;">
<br>
<input name="userfile" type="file" id="picField" onchange="preview(this)" >

     <br><img id="previewField" alt="" name="previewField" width="1" border="2" height="1" >

(αν κ δουλεύει μόνο με ie) κατάφερα να κάνω την εικόνα να εμφανίζεται στην οθόνη..ξέρεις μήπως πώς θα την στείλω για επεξεργασία και να της περάσω τα φίλτρα και όλα αυτά που είπε το άλλο παιδί πιο πάνω?

 

 

Είχα ξεχάσει να βάλω το script! sorry