Μέθοδος HTML canvas getImageData()

Εγχειρίδιο αναφοράς HTML5 Canvas

Ορισμός και χρήση

getImageData() Η μέθοδος επιστρέφει το ImageData αντικείμενο, το οποίο αντιγράφει τα δεδομένα pixel της καθορισμένης περιοχής του canvas.

Για κάθε pixel του ImageData αντικειμένου, υπάρχει τετραπλή πληροφορία, δηλαδή τα τιμή RGBA:

  • R - κόκκινο (0-255)
  • G - πράσινο (0-255)
  • B - μπλε (0-255)
  • A - αλφά通道 (0-255; 0 είναι διαφανές, 255 είναι πλήρως ορατό)

Η color/alpha υπάρχει σε μορφή array και αποθηκεύεται στο ImageData αντικείμενο data ιστοχώρο

Συμβουλή:Μετά την ολοκλήρωση της λειτουργίας των πληροφοριών color/alpha στο σύνολο των color/alpha στο array, μπορείτε να χρησιμοποιήσετε putImageData() Η μέθοδος αντιγράφει τα δεδομένα εικόνας πίσω στο canvas.

Παράδειγμα:

Η παρακάτω κώδικας μπορεί να αποκτήσει τις πληροφορίες color/alpha του πρώτου pixel του επιστρεφόμενου ImageData αντικειμένου:

red=imgData.data[0];
green=imgData.data[1];
green=imgData.data[1];
blue=imgData.data[2];

Δοκιμάστε το προσωπικά

Συμβουλή:alpha=imgData.data[3];

Μπορείτε επίσης να χρησιμοποιήσετε το getImageData() για να αναστραφήσετε τα χρώματα όλων των πιξέλων μιας εικόνας στο καanvas.

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

(Δείτε το παρακάτω παράδειγμα "Προσπαθήστε μόνοι σας").

Παράδειγμα

Παράδειγμα 1

Η παρακάτω κώδικας αντιγράφει τα δεδομένα των πιξέλων μιας καθορισμένης τριγωνουλής από το καanvas χρησιμοποιώντας το getImageData() και στη συνέχεια τοποθετεί τα δεδομένα πίσω στο καanvas με το putImageData():

επιληπτής c=document.getElementById("myCanvas");
επιληπτής ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
λειτουργία copy()
}
επιληπτής imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Δοκιμάστε το προσωπικά

Συμβουλή:Περισσότερα παραδείγματα στο κάτω μέρος της σελίδας.

Γλώσσα γραμματοσειράς

επιληπτής imgData=context.getImageData(x,y,width,height);

Τιμή παράμετρου

Παράμετροι Περιγραφή
x Η συντεταγμένη x του κορυφείου του τριγώνου από το αριστερό πάνω μέρος που ξεκινά η αντιγραφή.
y Η συντεταγμένη y του κορυφείου του τριγώνου από το αριστερό πάνω μέρος που ξεκινά η αντιγραφή.
width Το πλάτος της τριγωνουλής που θα αντιγραφεί.
height Η ύψος της τριγωνουλής που θα αντιγραφεί.

Περισσότερα παραδείγματα

Παράδειγμα 2

Η εικόνα που θα χρησιμοποιηθεί:

Ο Τούλιπας

Χρησιμοποιήστε το getImageData() για να αναστραφήσετε τα χρώματα όλων των πιξέλων της οθόνης.

Ο περιηγητής σας δεν υποστηρίζει το ετικέτα canvas του HTML5.

JavaScript:

επιληπτής c=document.getElementById("myCanvas");
επιληπτής ctx=c.getContext("2d");
επιληπτής img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
επιληπτής imgData=ctx.getImageData(0,0,c.width,c.height);
// Αναστροφή χρωμάτων
για (επιληπτής i=0; i<imgData.data.length; i+=4)
  }
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

Δοκιμάστε το προσωπικά

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στη τаблицή σηματοδοτούν την έκδοση του πρώτου προγράμματος που υποστηρίζει αυτήν την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Σημείωση:Οι εκδόσεις του Internet Explorer 8 και παλιότερες δεν υποστηρίζουν το στοιχείο <canvas>.

Εγχειρίδιο αναφοράς HTML5 Canvas