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

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

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

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