Cách sử dụng Canvas của JavaScript để thêm đường viền tùy chỉnh vào hình ảnh bị che

Làm chủ các đường viền hình ảnh bị che trong JavaScript Canvas

Hợp nhất nhiều hình ảnh là một bước phổ biến trong việc tạo hiệu ứng hình ảnh bằng JavaScript. Xác định các vùng có thể xem được của hình ảnh bằng mặt nạ là một kỹ thuật thường xuyên. Mặc dù điều này hữu ích cho việc tạo các hình dạng độc đáo nhưng việc thêm đường viền xung quanh các hình dạng được che đậy đó có thể là một thách thức. Mặc dù vải vẽ trong JavaScript cung cấp thao tác hình ảnh rộng rãi, không dễ để điều chỉnh đường viền xung quanh hình ảnh đã bị che.

Các nhà phát triển có thể áp dụng mặt nạ và cắt ảnh theo những cách giàu trí tưởng tượng với API canvas, mặc dù theo mặc định, mọi đường viền được tạo đều có xu hướng khớp với hình chữ nhật của khung vẽ. Khi bạn muốn tạo một đường viền khớp với các cạnh của một hình dạng phức tạp được xác định bằng mặt nạ, điều này sẽ gây ra một vấn đề. Mục tiêu là theo dõi hành trình chính xác của mặt nạ vượt ra ngoài đường viền hình chữ nhật đơn giản.

Bài đăng này sẽ giải thích cách áp dụng mặt nạ hình ảnh trong JavaScript và quan trọng hơn là cách đảm bảo rằng hình dạng riêng biệt của hình ảnh bị che được bao quanh bởi một đường viền. Ngoài ra, chúng ta sẽ xem xét một hàm hoàn thành việc tạo mặt nạ nhưng chưa có giải pháp đường viền xác định.

Bạn có thể tinh chỉnh giao diện của đường viền bằng cách tìm hiểu cách làm việc với các thao tác tổng hợp trong canvas. Hãy bắt đầu và xem cách sử dụng các tính năng canvas của JavaScript để thêm đường viền cần thiết xung quanh hình ảnh bị che.

Nhận biết cách áp dụng đường viền cho hình ảnh bị che

Mục tiêu của các tập lệnh được cung cấp là sử dụng một hình ảnh khác làm mặt nạ cho một hình ảnh, sau đó sử dụng API canvas để thêm đường viền tùy chỉnh xung quanh hình dạng có mặt nạ. Hai đối tượng hình ảnh mới được tạo khi bắt đầu chức năng cho mặt nạ và hình ảnh chính. Khi tải ảnh từ các nguồn bên ngoài, cài đặt nguồn gốc chéo là điều cần thiết để ngăn chặn sự cố do CORS. Một khung vẽ được hình thành và tỷ lệ của nó được điều chỉnh để phù hợp với hình ảnh mặt nạ sau khi cả hai hình ảnh đã được tải. Điều này tránh các vấn đề về thay đổi kích thước trong quá trình vẽ hình ảnh và đảm bảo rằng khung vẽ được chuẩn bị để làm việc với vùng thích hợp.

Kịch bản sau đó sử dụng drawImage() chức năng vẽ hình ảnh mặt nạ lên canvas. Khi làm như vậy, mặt nạ được áp dụng cho khung vẽ, đóng vai trò là lớp nền cho quy trình tạo mặt nạ. Hoạt động tổng hợp toàn cầu phải được đặt thành "nguồn vào" để áp dụng mặt nạ một cách chính xác. Canvas được hướng dẫn chỉ giữ lại các vùng của ảnh chính trùng với ảnh mặt nạ. Về bản chất, mặt nạ xác định hình dạng mà hình ảnh chính được cắt bớt. Thao tác tổng hợp được đặt lại thành "soạn nguồn" khi ảnh chính được vẽ bên trong vùng cắt này, cho phép các hành động bổ sung như vẽ đường viền mà không ảnh hưởng đến nội dung đã cắt trước đó.

Áp dụng đường viền cho hình được che bao gồm việc sử dụng đột quỵ() kỹ thuật. Đường dẫn hoặc biểu mẫu đã chỉ định trên khung vẽ được chỉ định bằng lệnh này. Trong giải pháp thứ hai, moveTo() và lineTo() được kết hợp để tạo đường dẫn canvas và vạch theo đường viền của mặt nạ theo cách thủ công. Với việc sử dụng các kỹ thuật này, bạn có thể chỉ định hình dạng của đường viền theo cách thủ công và đảm bảo rằng nó tuân theo hình dạng của mặt nạ thay vì ranh giới canvas hình chữ nhật. Bạn có toàn quyền kiểm soát hình thức của đường viền vì chiều rộng dòng thuộc tính đặt độ dày của đường viền và đột quỵPhong cách thuộc tính đặt màu của nó.

Cuối cùng, hàm toDataURL() được sử dụng để chuyển canvas thành chuỗi Base64. Bằng cách này, hình ảnh đã hoàn thiện—bao gồm mặt nạ và đường viền—được chuyển thành định dạng có thể dễ dàng sử dụng trong các khu vực khác của chương trình hoặc được tải lên máy chủ. Để tránh sai sót về thời gian, lời hứa đảm bảo rằng thao tác này chỉ kết thúc khi cả hai ảnh đều được tải đầy đủ. Các tập lệnh này cho thấy các kỹ thuật sửa đổi hình ảnh phức tạp, bao gồm tạo mặt nạ và áp dụng đường viền động khớp chính xác với các đường viền của mặt nạ, có thể được thực hiện bằng phần tử canvas của 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;
    });
}

Cải thiện hình ảnh bị che bằng đường viền tùy chỉnh trong JavaScript

Trải nghiệm người dùng ứng dụng JavaScript của bạn có thể được nâng cao đáng kể nhờ khả năng che hình ảnh và đặt đường viền tùy chỉnh khi xử lý API canvas. Với sự trợ giúp của mặt nạ, bạn có thể quyết định vùng nào của hình ảnh sẽ hiển thị tùy thuộc vào hình ảnh khác, được gọi là mặt nạ. Thêm đường viền xung quanh vùng bị che là một vấn đề mà nhiều nhà phát triển gặp phải, đặc biệt khi mặt nạ không phải là hình chữ nhật đơn giản. Các dự án có đường viền khớp chính xác với đường viền của mặt nạ sẽ trông bóng bẩy và chuyên nghiệp hơn.

Một giải pháp hữu ích cho vấn đề này là sử dụng API Canvas Đường dẫn2D sự vật. Bạn có thể sử dụng Path2D để thiết kế các tuyến đường phức tạp phù hợp với đường viền của mặt nạ và sau đó bao quanh chúng bằng đường viền. Phương pháp này cho phép bạn tạo các đường viền khớp chính xác với các góc của mặt nạ tùy chỉnh, vượt xa các hình chữ nhật thông thường. sử dụng moveTo() Và lineTo() với nhau giúp việc theo dõi đường viền của mặt nạ dễ dàng hơn và đảm bảo đường viền được căn chỉnh chính xác.

Hiệu suất là một yếu tố quan trọng khác cần tính đến, đặc biệt khi làm việc với hình ảnh lớn hơn hoặc áp dụng đường viền động trong thời gian thực. Tốc độ ứng dụng của bạn có thể được cải thiện bằng cách sử dụng các chiến lược như lưu hình ảnh bị che vào bộ nhớ đệm, cắt giảm các thao tác vẽ và hợp lý hóa quy trình kết xuất canvas. Ngay cả trong các cài đặt phức tạp hoặc hiệu suất cao, bạn có thể đảm bảo rằng quy trình tạo mặt nạ và vẽ đường viền diễn ra suôn sẻ bằng cách giảm các hành động vô nghĩa.