Μέθοδος Canvas getImageData()

Εγχειρίδιο Canvas

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

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

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

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

Το color/alpha υπάρχουν ως πίνακας και αποθηκεύονται στον αντικειμενο ImageData data πρότυπο.

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

Παράδειγμα:

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

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

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

Συμβουλή:Μπορείτε επίσης να χρησιμοποιήσετε τη μέθοδο getImageData() για να αναστρέψετε τα χρώματα όλων των pixel μιας εικόνας στον καμβά.

Χρησιμοποιήστε αυτή τη συνταγή για να διανύσετε όλους τους pixel και να αλλάξετε τις τιμές των χρωμάτων τους:

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

Παρακαλώ δείτε το παράδειγμα που ακολουθεί στο "Προσωπική δοκιμή".

Εκδείξεις

Παράδειγμα 1

Το παρακάτω κείμενο χρησιμοποιεί το getImageData() για να αντιγράψει τα δεδομένα pixel του καθορισμένου ορθογώνιου του canvas, και στη συνέχεια χρησιμοποιεί το putImageData() για να τοποθετήσει τα δεδομένα εικόνας πίσω στο canvas:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

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

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

Γλώσσα

var imgData=context.getImageData(x,y,width,height);

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

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

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

Παράδειγμα 2

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

Το Λουλούδι Τουλίπα

Χρησιμοποιήστε το getImageData() για να αναστρέψετε τα χρώματα κάθε pixel της εικόνας του canvas.

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// Αναστροφή χρωμάτων
for (var 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

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

Εγχειρίδιο Canvas