Μέθοδος putImageData() του καanvas

Εγχειρίδιο Canvas

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

putImageData() Μέθοδος που τοποθετεί τα δεδομένα εικόνας πίσω στο καanvas από το καθορισμένο αντικείμενο ImageData.

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

Συμβουλή:Δείτε επίσης createImageData() Μέθοδος που μπορεί να δημιουργήσει νέο κενό αντικείμενο ImageData.

Παράδειγμα

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

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

Προσπάθησε να το δοκιμάσεις

Γλώσσα

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

Αξία παράμετρου

Παράμετρος Περιγραφή
imgData Ορίζει το αντικείμενο ImageData που πρέπει να τοποθετηθεί πίσω στο καanvas.
x Η x座標 του πάνω αριστερού γωνιακού σημείου του αντικειμένου ImageData, με πιξέλ.
y Η y座標 του πάνω αριστερού γωνιακού σημείου του αντικειμένου ImageData, με πιξέλ.
dirtyX Προαιρετικός. Ο οριζόντιος δείκτης (x), με πιξέλ, η θέση της εικόνας στο καanvas.
dirtyY Προαιρετικός. Ο οριζόντιος δείκτης (y), με πιξέλ, η θέση της εικόνας στο καanvas.
dirtyWidth Προαιρετικός. Η πλάτος που χρησιμοποιείται για τη διαγράμμιση εικόνας στο καanvas.
dirtyHeight Προαιρετικός. Η ύψος που χρησιμοποιείται για τη διαγράμμιση εικόνας στο καanvas.

Διακομιστής περιηγητών υποστηρίζεται

Τα αριθμήματα στο πίνακα δείχνουν την έκδοση του πρώτου προγράμματος που υποστηρίζει την ιδιότητα.

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