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

Θα διατρέξουμε την 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 θα εμφανίσει ένα σφάλμα εξαιτίας περιορισμών ασφαλείας.