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

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