Maskelenmiş Bir Resme Özel Kenarlık Eklemek için JavaScript Kanvası Nasıl Kullanılır?

JavaScript Canvas'ta Maskelenmiş Görüntü Kenarlıklarında Uzmanlaşma

Çoklu resim birleştirme, JavaScript görsel efekt oluşturmada yaygın bir adımdır. Bir görüntünün görülebilen alanlarının maske ile tanımlanması sık kullanılan bir tekniktir. Bu, benzersiz formlar oluşturmak için yararlı olsa da, bu maskelenmiş şekillerin çevresine kenarlık eklemek zor olabilir. Her ne kadar tuval JavaScript'teki öğe kapsamlı görüntü manipülasyonu sunduğundan, maskelenmiş bir görüntünün etrafındaki kenarlığı ayarlamak kolay değildir.

Geliştiriciler, bu uygulamayla maskeleri uygulayabilir ve resimleri yaratıcı şekillerde kırpabilirler. Tuval API'siancak varsayılan olarak oluşturulan kenarlıklar tuvalin dikdörtgen şekliyle eşleşme eğilimindedir. Bir maskeyle tanımlanan karmaşık bir şeklin kenarlarıyla eşleşen bir kenarlık oluşturmak istediğinizde bu bir sorun teşkil eder. Amaç, maskenin düz dikdörtgen sınırın ötesindeki kesin yolculuğunu takip etmektir.

Bu yazı, JavaScript'te resim maskesinin nasıl uygulanacağını ve daha da önemlisi, maskelenen resmin farklı şeklinin bir kenarlıkla çevrelendiğinden nasıl emin olunacağını açıklayacaktır. Ek olarak maskelemeyi tamamlayan ancak henüz tanımlı bir sınır çözümü olmayan bir fonksiyonun üzerinden geçeceğiz.

Tuvalde bileşik işlemlerle nasıl çalışılacağını öğrenerek kenarlığın görünümüne ince ayar yapabilirsiniz. Hadi başlayalım ve maskelenmiş bir görüntünün çevresine gerekli kenarlığı eklemek için JavaScript'in tuval özelliklerini nasıl kullanabileceğimizi görelim.

Maskelenmiş Bir Görüntüye Kenarlığın Nasıl Uygulanacağını Tanıma

Sağlanan komut dosyalarının amacı, başka bir resmi bir görüntü için maske olarak kullanmak ve ardından Tuval API'si maskelenmiş şeklin çevresine özel bir kenarlık eklemek için. Fonksiyonun başlangıcında maske ve ana görüntü için iki yeni görüntü nesnesi oluşturulur. Fotoğrafları harici kaynaklardan yüklerken, CORS'tan kaynaklanan sorunları önlemek için çapraz kaynak ayarı önemlidir. Her iki görüntü de yüklendikten sonra bir tuval oluşturulur ve oranları maske görüntüsüyle eşleşecek şekilde ayarlanır. Bu, görüntü çizimi sırasında yeniden boyutlandırma sorunlarını önler ve tuvalin uygun alanla çalışmaya hazırlanmasını garanti eder.

Komut dosyası daha sonra şunu kullanır: DrawImage() maske görüntüsünü tuval üzerine çizme işlevi. Bunu yaparken maske, maskeleme prosedürü için temel katman görevi görecek şekilde tuval üzerine uygulanır. Maskenin doğru şekilde uygulanabilmesi için genel bileşik işleminin "kaynak girişi" olarak ayarlanması gerekir. Tuvale, yalnızca birincil resmin maske görüntüsüyle çakışan alanlarını tutması talimatı verilir. Aslında maske, ana görüntünün kırpılacağı şekli tanımlar. Ana resim bu kırpma alanı içinde çizildiğinde, bileşik işlem "kaynak üzeri" olarak sıfırlanır ve önceden kırpılan içeriği etkilemeden kenar boyama gibi ek eylemlere olanak sağlanır.

Maskelenen şekle kenarlık uygulamak, felç() teknik. Belirtilen yol veya form tuval üzerinde bu komutla gösterilir. İkinci çözümde, tuval yolunu manuel olarak oluşturmak ve maskenin sınırlarını izlemek için moveTo() ve lineTo() birleştirilir. Bu teknikleri kullanarak kenarlığın şeklini manuel olarak belirleyebilir ve dikdörtgen kanvas sınırı yerine maskenin şekline uyduğundan emin olabilirsiniz. Kenarlığın görünümü üzerinde tam kontrole sahipsiniz çünkü çizgi Genişliği özelliği sınırın kalınlığını ve vuruş stili özelliği rengini belirler.

Son olarak, tuvali bir Base64 dizesine dönüştürmek için toDataURL() işlevi kullanılır. Bunu yaparak, bitmiş görüntü (maske ve çerçeve dahil) programın diğer alanlarında kolaylıkla kullanılabilen veya bir sunucuya yüklenen bir formata dönüştürülür. Zamanlama hatalarından kaçınmak için, söz konusu işlemin ancak her iki fotoğraf da tamamen yüklendiğinde sona ereceği garanti ediliyor. Bu komut dosyaları, maskeleme ve maskenin dış hatlarıyla tam olarak eşleşen dinamik bir kenarlık uygulama dahil olmak üzere karmaşık görüntü değiştirme tekniklerinin, JavaScript'in canvas öğesiyle nasıl gerçekleştirilebileceğini gösteriyor.

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'te Maskelenmiş Görüntüleri Özel Kenarlıklarla Geliştirme

JavaScript uygulamanızın kullanıcı deneyimi, görüntüleri maskeleme ve özel kenarlıklar ayarlama özelliğiyle büyük ölçüde geliştirilebilir. Tuval API'si. Maskeleme yardımıyla, maske olarak bilinen başka bir görüntüye bağlı olarak görüntünün hangi alanlarının görünür olacağına karar verebilirsiniz. Maskelenmiş bölgenin çevresine kenarlık eklemek, özellikle maske basit bir dikdörtgen şekil olmadığında birçok geliştiricinin karşılaştığı bir sorundur. Maskenin dış hatlarına tam olarak uyan kenarlıklara sahip projeler daha gösterişli ve uzman görünecektir.

Bu soruna yararlı bir çözüm Canvas API'lerini kullanmaktır. Yol2D nesne. Maskenizin hatlarına uyan karmaşık rotalar tasarlamak ve ardından bunları bir kenarlıkla çevrelemek için Path2D'yi kullanabilirsiniz. Bu yöntem, geleneksel dikdörtgenlerin ötesine geçerek, özel maskenizin köşeleriyle tam olarak eşleşen kenarlıklar oluşturmanıza olanak tanır. Kullanma moveTo() Ve lineTo() birlikte maskenin dış hatlarının izlenmesini kolaylaştırır ve tam olarak hizalanmış bir kenarlığı garanti eder.

Performans, özellikle daha büyük görüntülerle çalışırken veya gerçek zamanlı olarak dinamik olarak kenarlıklar uygularken dikkate alınması gereken bir diğer önemli faktördür. Maskelenen resmin önbelleğe alınması, çizim işlemlerinin azaltılması ve tuval oluşturma sürecinin kolaylaştırılması gibi stratejiler kullanılarak uygulamanızın hızı artırılabilir. Karmaşık veya yüksek performanslı ortamlarda bile, anlamsız eylemleri azaltarak maskeleme ve sınır çizme prosedürlerinin sorunsuz ilerlemesini garanti edebilirsiniz.