Πώς να χρησιμοποιήσετε τον καμβά JavaScript για να προσθέσετε ένα προσαρμοσμένο περίγραμμα σε μια καλυμμένη εικόνα

Mastering Masked Image Borders σε JavaScript Canvas

Η συγχώνευση πολλαπλών εικόνων είναι ένα κοινό βήμα στη δημιουργία οπτικών εφέ JavaScript. Ο καθορισμός των ορατών περιοχών μιας εικόνας με μια μάσκα είναι μια συχνή τεχνική. Αν και αυτό είναι χρήσιμο για τη δημιουργία μοναδικών μορφών, μπορεί να είναι δύσκολο να προσθέσετε ένα περίγραμμα γύρω από αυτά τα καλυμμένα σχήματα. Αν και το καμβάς στοιχείο στο JavaScript προσφέρει εκτεταμένο χειρισμό εικόνας, δεν είναι εύκολο να ρυθμίσετε το περίγραμμα γύρω από μια εικόνα που έχει καλυφθεί.

Οι προγραμματιστές μπορούν να εφαρμόσουν μάσκες και να αποκόψουν εικόνες με ευφάνταστους τρόπους με το Canvas API, αν και από προεπιλογή, οποιοδήποτε περίγραμμα δημιουργείται τείνει να ταιριάζει με το ορθογώνιο σχήμα του καμβά. Όταν θέλετε να δημιουργήσετε ένα περίγραμμα που ταιριάζει με τις άκρες ενός περίπλοκου σχήματος που ορίζεται από μια μάσκα, αυτό παρουσιάζει πρόβλημα. Ο στόχος είναι να παρακολουθήσετε το ακριβές ταξίδι της μάσκας πέρα ​​από το απλό ορθογώνιο περίγραμμα.

Αυτή η ανάρτηση θα εξηγήσει πώς να εφαρμόσετε μια μάσκα εικόνας σε JavaScript και, πιο σημαντικό, πώς να βεβαιωθείτε ότι το ξεχωριστό σχήμα της καλυμμένης εικόνας περιβάλλεται από ένα περίγραμμα. Επιπλέον, θα εξετάσουμε μια συνάρτηση που ολοκληρώνει τη κάλυψη, αλλά δεν έχει ακόμη μια καθορισμένη λύση περιγράμματος.

Μπορείτε να ρυθμίσετε την εμφάνιση του περιγράμματος μαθαίνοντας πώς να εργάζεστε με σύνθετες λειτουργίες σε καμβά. Ας ξεκινήσουμε και ας δούμε πώς να χρησιμοποιήσουμε τις δυνατότητες καμβά της JavaScript για να προσθέσουμε το απαραίτητο περίγραμμα γύρω από μια καλυμμένη εικόνα.

Αναγνωρίζοντας πώς να εφαρμόσετε ένα περίγραμμα σε μια καλυμμένη εικόνα

Ο στόχος των σεναρίων που παρέχονται είναι να χρησιμοποιήσουν μια άλλη εικόνα ως μάσκα για μια εικόνα και στη συνέχεια να χρησιμοποιήσουν το Canvas API για να προσθέσετε ένα προσαρμοσμένο περίγραμμα γύρω από το καλυμμένο σχήμα. Δύο νέα αντικείμενα εικόνας δημιουργούνται στην αρχή της λειτουργίας για τη μάσκα και την κύρια εικόνα. Κατά τη φόρτωση φωτογραφιών από εξωτερικές πηγές, η ρύθμιση cross-origin είναι απαραίτητη για την αποφυγή προβλημάτων που οφείλονται σε CORS. Σχηματίζεται ένας καμβάς και οι αναλογίες του προσαρμόζονται ώστε να ταιριάζουν με την εικόνα της μάσκας μόλις φορτωθούν και οι δύο εικόνες. Αυτό αποφεύγει προβλήματα αλλαγής μεγέθους κατά τη σχεδίαση εικόνων και εγγυάται ότι ο καμβάς είναι προετοιμασμένος για εργασία με την κατάλληλη περιοχή.

Στη συνέχεια, το σενάριο χρησιμοποιεί το drawImage() λειτουργία για να σχεδιάσετε την εικόνα της μάσκας στον καμβά. Με αυτόν τον τρόπο, η μάσκα εφαρμόζεται στον καμβά, χρησιμεύοντας ως το στρώμα βάσης για τη διαδικασία κάλυψης. Η συνολική σύνθετη λειτουργία πρέπει να ρυθμιστεί σε "source-in" για να εφαρμοστεί σωστά η μάσκα. Ο καμβάς έχει εντολή να διατηρεί μόνο τις περιοχές της κύριας εικόνας που συμπίπτουν με την εικόνα της μάσκας. Στην ουσία, η μάσκα καθορίζει το σχήμα στο οποίο περικόπτεται η κύρια εικόνα. Η σύνθετη λειτουργία επαναφέρεται στο "source-over" όταν η κύρια εικόνα σχεδιάζεται μέσα σε αυτήν την περιοχή αποκοπής, επιτρέποντας πρόσθετες ενέργειες όπως η ζωγραφική περιγράμματος χωρίς να επηρεαστεί το περιεχόμενο που είχε περικοπεί προηγουμένως.

Η εφαρμογή περιγράμματος στο καλυμμένο σχήμα περιλαμβάνει τη χρήση του κτύπημα() τεχνική. Η καθορισμένη διαδρομή ή φόρμα στον καμβά υποδεικνύεται από αυτήν την εντολή. Στη δεύτερη λύση, το moveTo() και το lineTo() συνδυάζονται για να δημιουργήσουν με μη αυτόματο τρόπο τη διαδρομή του καμβά και να ανιχνεύσουν τα όρια της μάσκας. Με τη χρήση αυτών των τεχνικών, μπορείτε να καθορίσετε χειροκίνητα το σχήμα του περιγράμματος και να βεβαιωθείτε ότι προσκολλάται στο σχήμα της μάσκας και όχι στο ορθογώνιο όριο του καμβά. Έχετε τον απόλυτο έλεγχο της εμφάνισης των συνόρων επειδή το Πλάτος γραμμής Η ιδιότητα ορίζει το πάχος του περιγράμματος και το strokeStyle η ιδιοκτησία θέτει το χρώμα της.

Τέλος, η συνάρτηση toDataURL() χρησιμοποιείται για τη μετατροπή του καμβά σε συμβολοσειρά Base64. Με αυτόν τον τρόπο, η τελική εικόνα —συμπεριλαμβανομένης της μάσκας και του περιγράμματος— μετατρέπεται σε μορφή που χρησιμοποιείται εύκολα σε άλλες περιοχές του προγράμματος ή μεταφορτώνεται σε διακομιστή. Προκειμένου να αποφευχθούν λάθη χρονισμού, η υπόσχεση διασφαλίζει ότι αυτή η λειτουργία τελειώνει μόνο όταν και οι δύο εικόνες έχουν φορτωθεί πλήρως. Αυτά τα σενάρια δείχνουν πώς μπορούν να επιτευχθούν εξελιγμένες τεχνικές τροποποίησης εικόνας, συμπεριλαμβανομένης της κάλυψης και της εφαρμογής ενός δυναμικού περιγράμματος που ταιριάζει ακριβώς με τα περιγράμματα της μάσκας, με το στοιχείο καμβά της JavaScript.

function applyFiltersAndConvertToBase64(imageUrl, materialImage) {
    return new Promise((resolve, reject) => {
        const maskImg = new Image();
        const mainImg = new Image();
        maskImg.crossOrigin = "anonymous";
        mainImg.crossOrigin = "anonymous";
        let imagesLoaded = 0;
        const onLoad = () => {
            imagesLoaded++;
            if (imagesLoaded === 2) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = maskImg.width;
                canvas.height = maskImg.height;
                ctx.drawImage(maskImg, 0, 0);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(mainImg, 0, 0, maskImg.width, maskImg.height);
                ctx.globalCompositeOperation = 'source-over';
                ctx.lineWidth = 5; // Border thickness
                ctx.strokeStyle = 'red'; // Border color
                ctx.stroke(); // Draw border around mask
                const base64Image = canvas.toDataURL('image/png');
                resolve(base64Image);
            }
        };
        maskImg.onload = onLoad;
        mainImg.onload = onLoad;
        maskImg.onerror = reject;
        mainImg.onerror = reject;
        maskImg.src = imageUrl;
        mainImg.src = materialImage;
    });
}

function applyFiltersAndConvertToBase64(imageUrl, materialImage) {
    return new Promise((resolve, reject) => {
        const maskImg = new Image();
        const mainImg = new Image();
        maskImg.crossOrigin = "anonymous";
        mainImg.crossOrigin = "anonymous";
        let imagesLoaded = 0;
        const onLoad = () => {
            imagesLoaded++;
            if (imagesLoaded === 2) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = maskImg.width;
                canvas.height = maskImg.height;
                ctx.drawImage(maskImg, 0, 0);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(mainImg, 0, 0, maskImg.width, maskImg.height);
                ctx.globalCompositeOperation = 'source-over';
                // Create path for the mask shape
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(maskImg.width, 0);
                ctx.lineTo(maskImg.width, maskImg.height);
                ctx.lineTo(0, maskImg.height);
                ctx.closePath();
                ctx.lineWidth = 5; // Border thickness
                ctx.strokeStyle = 'blue'; // Border color
                ctx.stroke(); // Apply the border along the path
                const base64Image = canvas.toDataURL('image/png');
                resolve(base64Image);
            }
        };
        maskImg.onload = onLoad;
        mainImg.onload = onLoad;
        maskImg.onerror = reject;
        mainImg.onerror = reject;
        maskImg.src = imageUrl;
        mainImg.src = materialImage;
    });
}

Βελτίωση καλυμμένων εικόνων με προσαρμοσμένα περιγράμματα σε JavaScript

Η εμπειρία χρήστη της εφαρμογής σας JavaScript μπορεί να βελτιωθεί σημαντικά από τη δυνατότητα απόκρυψης εικόνων και ορισμού προσαρμοσμένων περιθωρίων όταν αντιμετωπίζετε Canvas API. Με τη βοήθεια της κάλυψης, μπορείτε να αποφασίσετε ποιες περιοχές μιας εικόνας είναι ορατές ανάλογα με μια άλλη εικόνα, γνωστή ως μάσκα. Η προσθήκη περιγράμματος γύρω από τη ζώνη με κάλυψη είναι ένα ζήτημα που αντιμετωπίζουν πολλοί προγραμματιστές, ιδιαίτερα όταν η μάσκα δεν έχει ένα απλό ορθογώνιο σχήμα. Τα έργα με περιγράμματα που ταιριάζουν ακριβώς με το περίγραμμα της μάσκας θα φαίνονται πιο εκλεπτυσμένα και εξειδικευμένα.

Μια χρήσιμη λύση σε αυτό το πρόβλημα είναι να χρησιμοποιήσετε το Canvas API Path2D αντικείμενο. Μπορείτε να χρησιμοποιήσετε το Path2D για να σχεδιάσετε περίπλοκες διαδρομές που ταιριάζουν στα περιγράμματα της μάσκας σας και στη συνέχεια να τις περιβάλλουν με ένα περίγραμμα. Αυτή η μέθοδος σάς επιτρέπει να δημιουργήσετε περιγράμματα που ταιριάζουν με ακρίβεια στις γωνίες της προσαρμοσμένης μάσκας σας, υπερβαίνοντας τα συμβατικά ορθογώνια. Χρησιμοποιώντας moveTo() και lineTo() μαζί διευκολύνει τον εντοπισμό του περιγράμματος της μάσκας και εγγυάται ένα περίγραμμα που είναι ευθυγραμμισμένο με ακρίβεια.

Η απόδοση είναι ένας άλλος σημαντικός παράγοντας που πρέπει να λαμβάνεται υπόψη, ιδιαίτερα όταν εργάζεστε με μεγαλύτερες εικόνες ή εφαρμόζετε δυναμικά περιγράμματα σε πραγματικό χρόνο. Η ταχύτητα της εφαρμογής σας μπορεί να βελτιωθεί με τη χρήση στρατηγικών όπως η προσωρινή αποθήκευση της καλυμμένης εικόνας, ο περιορισμός των λειτουργιών σχεδίασης και ο εξορθολογισμός της διαδικασίας απόδοσης καμβά. Ακόμη και σε περίπλοκες ρυθμίσεις ή ρυθμίσεις υψηλής απόδοσης, μπορείτε να εγγυηθείτε ότι οι διαδικασίες κάλυψης και σχεδίασης περιγράμματος πηγαίνουν ομαλά, μειώνοντας τις άσκοπες ενέργειες.