Як використовувати Canvas JavaScript, щоб додати спеціальну рамку до замаскованого зображення

Освоєння замаскованих меж зображень у JavaScript Canvas

Злиття кількох зображень є звичайним кроком у створенні візуальних ефектів JavaScript. Визначення видимих ​​областей зображення за допомогою маски є частим прийомом. Хоча це корисно для створення унікальних форм, може бути складно додати рамку навколо цих замаскованих форм. Хоча полотно елемент у JavaScript пропонує широкий спектр маніпуляцій із зображеннями, нелегко налаштувати рамку навколо зображення, яке було замасковане.

Розробники можуть творчо застосовувати маски та вирізати зображення за допомогою Canvas API, хоча за замовчуванням будь-яка створена межа має тенденцію відповідати прямокутній формі полотна. Коли ви хочете створити рамку, яка збігається з краями складної форми, визначеної маскою, це створює проблему. Мета полягає в тому, щоб простежити точну подорож маски за прямою прямокутною межею.

У цьому дописі пояснюється, як застосувати маску зображення в JavaScript і, що більш важливо, як переконатися, що чітка форма маскованого зображення оточена рамкою. Крім того, ми розглянемо функцію, яка завершує маскування, але ще не має визначеного межового рішення.

Ви можете налаштувати зовнішній вигляд межі, навчившись працювати з комбінованими операціями на полотні. Давайте почнемо і подивимося, як використовувати функції полотна JavaScript, щоб додати необхідну рамку навколо замаскованого зображення.

Розпізнавання того, як застосувати рамку до замаскованого зображення

Мета наданих сценаріїв полягає в тому, щоб використовувати інше зображення як маску для одного зображення, а потім використовувати Canvas API щоб додати спеціальну рамку навколо замаскованої форми. Два нових об’єкти зображення створюються на початку функції для маски та основного зображення. Під час завантаження фотографій із зовнішніх джерел налаштування перехресного походження є важливим, щоб запобігти проблемам через CORS. Після завантаження обох зображень формується полотно, а його пропорції регулюються відповідно до зображення маски. Це дозволяє уникнути проблем зі зміною розміру під час малювання зображення та гарантує, що полотно буде підготовлено до роботи з відповідною областю.

Потім сценарій використовує drawImage() функція для малювання зображення маски на полотні. При цьому маска наноситься на полотно, яке є базовим шаром для процедури маскування. Щоб правильно застосувати маску, для глобальної комбінованої операції має бути встановлено значення "джерело вхід". Полотно отримує інструкцію зберігати лише ті області основного зображення, які збігаються із зображенням маски. По суті, маска визначає форму, до якої обрізається основне зображення. Комбінована операція скидається на «джерело над», коли основне зображення малюється всередині цієї області відсікання, що дозволяє виконувати додаткові дії, як-от малювання рамки, не впливаючи на попередньо відрізаний вміст.

Застосування рамки до замаскованої форми передбачає використання інсульт() техніка. Зазначений шлях або форма на полотні вказується цією командою. У другому рішенні, moveTo() і lineTo() поєднуються, щоб вручну створити контур полотна та простежити межі маски. За допомогою цих прийомів ви можете вручну вказати форму рамки та переконатися, що вона дотримується форми маски, а не прямокутної межі полотна. Ви маєте повний контроль над зовнішнім виглядом кордону, оскільки lineWidth властивість встановлює товщину межі та strokeStyle властивість встановлює свій колір.

Нарешті, функція toDataURL() використовується для перетворення полотна в рядок Base64. Завдяки цьому готове зображення, включаючи маску та рамку, перетворюється у формат, який легко використовувати в інших областях програми або завантажувати на сервер. Щоб уникнути помилок часу, обіцянка гарантує, що ця операція завершується лише тоді, коли обидва зображення повністю завантажуються. Ці сценарії демонструють, як складні методи модифікації зображення, включаючи маскування та застосування динамічної рамки, яка точно відповідає контурам маски, можуть бути виконані за допомогою елемента canvas 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

Можливість маскувати зображення та встановлювати власні межі під час роботи з Canvas API. За допомогою маскування ви можете визначити, які області зображення будуть видимі залежно від іншого зображення, відомого як маска. Додавання рамки навколо маскованої зони є проблемою, з якою стикаються багато розробників, особливо коли маска не має простої прямокутної форми. Проекти з межами, які точно збігаються з контуром маски, виглядатимуть більш витонченими та експертними.

Корисним рішенням цієї проблеми є використання Canvas API Шлях 2D об'єкт. Ви можете використовувати Path2D для розробки складних маршрутів, які відповідають контурам вашої маски, а потім оточують їх рамкою. Цей метод дозволяє генерувати межі, які точно відповідають кутам вашої спеціальної маски, виходячи за межі звичайних прямокутників. Використання moveTo() і lineTo() разом легше простежити контури маски та гарантує точне вирівнювання межі.

Продуктивність — ще один важливий фактор, який слід брати до уваги, особливо під час роботи з великими зображеннями або динамічного застосування рамок у режимі реального часу. Швидкість вашої програми можна покращити, використовуючи такі стратегії, як кешування замаскованого зображення, скорочення операцій малювання та спрощення процесу візуалізації полотна. Навіть у складних або високопродуктивних налаштуваннях ви можете гарантувати, що процедури маскування та малювання меж відбуватимуться гладко, зменшуючи безглузді дії.