Υποενότητα 10.3: Επεξεργασία εικόνας

Δημιουργία δεδομένων εικόνας

Η μέθοδος  createImageData() είναι μια μέθοδος που δημιουργεί ένα νέο αντικείμενο ImageData που είναι κενό. Αυτό το νέο αντικείμενο, από προεπιλογή, αποδίδει σε κάθε pixel του καμβά  τιμή RGBA = (0,0,0,0.0) -  διαφανές μαύρο.

Θα δημιουργήσουμε κενά δεδομένα εικόνας για 3 νέα στοιχεία καμβά:

<canvas id="myCanvas2" height="272" width="400"></canvas>
<canvas id="myCanvas3" height="272" width="400"></canvas>
<canvas id="myCanvas4" height="272" width="400"></canvas>

Θα τραβήξουμε εδώ τα στοιχεία καμβά και τα περιβάλλοντα γραφικών- graphics contexts:

var canvas2 = document.getElementById("myCanvas2"); 
var context2 = canvas2.getContext('2d'); 
var canvas3 = document.getElementById("myCanvas3"); 
var context3 = canvas3.getContext('2d'); 
var canvas4 = document.getElementById("myCanvas4"); 
var context4 = canvas4.getContext('2d');

var imgData2 = context2.createImageData(canvas2.width, canvas2.height);
var imgData3 = context3.createImageData(canvas3.width, canvas3.height);
var imgData4 = context4.createImageData(canvas4.width, canvas4.height);

Αντιστροφή χρώματος

Θα διατρέξουμε την bitmap array pix και θα αντιστρέψουμε το χρώμα του prototype.png. Μετά από αυτό, θα βάλουμε τα νέα δεδομένα εικόνας στο canvas2:

Ο κώδικας JavaScript για τα παραπάνω είναι:

/* Loop over each pixel and invert the color.*/
for (var i = 0, n = pix.length; i < n; i += 4) {
imgData2.data[i ] = 255 - pix[i ]; /* red */
imgData2.data[i+1] = 255 - pix[i+1]; /* green */
imgData2.data[i+2] = 255 - pix[i+2]; /* blue */
imgData2.data[i+3] = pix[i+3]; /* alpha */
}
console.log(imgData2);
/* now draw the new image data on the second canvas */
context2.putImageData(imgData2, 0, 0);

Ο κώδικας θα δημιουργήσει την ακόλουθη εικόνα:

Σημαντική σημείωση: Για να κάνετε αυτή την άσκηση χρησιμοποιώντας το τοπικό σας σύστημα αρχείων, θα χρειαστεί να χρησιμοποιήσετε τον Firefox ως πρόγραμμα περιήγησης. Ο Chrome θα εμφανίσει ένα σφάλμα εξαιτίας περιορισμών ασφαλείας.

Μπλε εικόνα

Θα διατρέξουμε την bitmap array pix aκαι θα αλλάξουμε το χρώμα τηςprototype.pngσε μπλε. Μετά από αυτό, θα βάλουμε τα νέα δεδομένα εικόνας στο canvas3

Ο κώδικας JavaScript για τα παραπάνω είναι:

for (var i = 0, n = pix.length; i < n; i ++) {
  imgData3.data[i ] = pix[i ];
   if (i % 4 == 0 ) {
     imgData3.data[i ] = 0;
   }
   else if (i % 4 == 1) {
     imgData3.data[i ] = 0;
   }
 }
 context3.putImageData(imgData3, 0, 0);

Ο κώδικας θα δημιουργήσει την ακόλουθη εικόνα:

Σημαντική σημείωση: Για να κάνετε αυτή την άσκηση χρησιμοποιώντας το τοπικό σας σύστημα αρχείων, θα χρειαστεί να χρησιμοποιήσετε τον Firefox ως πρόγραμμα περιήγησης.   Ο Chrome θα εμφανίσει ένα σφάλμα εξαιτίας περιορισμών ασφαλείας.

Ημι - διαφανής εικόνα

Εδώ ο στόχος μας είναι να δημιουργήσουμε μια ημι - διαφανή εικόνα.

Θα διατρέξουμε την bitmap array pix and και θα μετατρέψουμε την εικόνα  prototype.png σε ημι - διαφανή. Μετά από αυτό, θα βάλουμε τα νέα δεδομένα εικόνας στο canvas4

Ο κώδικας JavaScript για τα παραπάνω είναι:

/* make transparent*/
for (var i = 0, n = pix.length; i < n; i ++) {
  imgData4.data[i ] = pix[i ];
  if (i % 4 == 3 ) {
    imgData4.data [i] = pix[i]/3
  }
}
console.log(imgData4);
context4.putImageData(imgData4, 0, 0);

Ο κώδικας θα δημιουργήσει την ακόλουθη εικόνα:

Σημαντική σημείωση: Για να κάνετε αυτή την άσκηση χρησιμοποιώντας το τοπικό σας σύστημα αρχείων, θα χρειαστεί να χρησιμοποιήσετε τον Firefox ως πρόγραμμα περιήγησης.   Ο Chrome θα εμφανίσει ένα σφάλμα εξαιτίας περιορισμών ασφαλείας

Άσκηση

Άσκηση

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice10.3.html στον φάκελο "exercises". Αντιγράψτε  this κώδικα και επικολλήστε τον στο αρχείο. Αποθηκεύστε το αρχείο.
2. Δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως 10.3.js στον φάκελο "js/ exercises". Αντιγράψτε this κώδικα και επικολλήστε τον στο αρχείο. Αποθηκεύστε το αρχείο.You may need to create the js folder (if it's not already there)
3. Ανοίξτε το αρχείο html στον Firefox. Είναι όλα καλά;