Jak używać płótna JavaScript, aby dodać niestandardowe obramowanie do zamaskowanego obrazu

Opanowanie zamaskowanych obramowań obrazów w JavaScript Canvas

Fuzja wielu obrazów jest częstym krokiem w tworzeniu efektów wizualnych JavaScript. Często stosowaną techniką jest definiowanie widocznych obszarów obrazu za pomocą maski. Chociaż jest to pomocne przy tworzeniu unikalnych formularzy, dodanie obramowania wokół tych zamaskowanych kształtów może być trudne. Chociaż płótno Element w JavaScript umożliwia szeroką manipulację obrazem, nie jest łatwo dostosować obramowanie wokół zamaskowanego obrazu.

Programiści mogą nakładać maski i przycinać obrazy w pomysłowy sposób za pomocą narzędzia API kanwy, chociaż domyślnie każda wygenerowana ramka ma tendencję do dopasowania do prostokątnego kształtu płótna. Jeśli chcesz utworzyć obramowanie pasujące do krawędzi skomplikowanego kształtu zdefiniowanego przez maskę, stanowi to problem. Celem jest dokładne prześledzenie podróży maski poza prostą prostokątną granicę.

W tym poście wyjaśniono, jak zastosować maskę obrazu w JavaScript i, co ważniejsze, jak upewnić się, że wyraźny kształt zamaskowanego obrazu jest otoczony ramką. Dodatkowo omówimy funkcję, która kończy maskowanie, ale nie ma jeszcze zdefiniowanego rozwiązania granicznego.

Możesz dostosować wygląd obramowania, ucząc się, jak pracować z operacjami złożonymi na płótnie. Zacznijmy i zobaczmy, jak używać funkcji canvas JavaScriptu, aby dodać niezbędne obramowanie wokół zamaskowanego obrazu.

Rozpoznawanie sposobu zastosowania obramowania do zamaskowanego obrazu

Celem dostarczonych skryptów jest użycie innego obrazu jako maski dla jednego obrazu, a następnie użycie API kanwy , aby dodać niestandardowe obramowanie wokół zamaskowanego kształtu. Na początku funkcji dla maski i obrazu głównego tworzone są dwa nowe obiekty obrazu. Podczas ładowania zdjęć ze źródeł zewnętrznych ustawienie cross-origin jest niezbędne, aby zapobiec problemom wynikającym z CORS. Po załadowaniu obu obrazów tworzone jest płótno, którego proporcje są dopasowywane do obrazu maski. Pozwala to uniknąć problemów ze zmianą rozmiaru podczas rysowania obrazu i gwarantuje, że płótno jest przygotowane do pracy z odpowiednim obszarem.

Następnie skrypt używa narysujObraz() funkcja rysowania obrazu maski na płótnie. W ten sposób na płótno nakładana jest maska, która służy jako warstwa podkładowa do zabiegu maskowania. Aby poprawnie zastosować maskę, globalna operacja złożona musi być ustawiona na „source-in”. Płótno ma zachować tylko te obszary obrazu głównego, które pokrywają się z obrazem maski. Zasadniczo maska ​​określa kształt, do którego przycinany jest główny obraz. Operacja złożona jest resetowana do „przechodzenia do źródła”, gdy główny obraz jest rysowany wewnątrz tego obszaru przycinania, umożliwiając dodatkowe działania, takie jak malowanie obramowania, bez wpływu na wcześniej przyciętą zawartość.

Nałożenie obramowania na zamaskowany kształt wymaga użycia opcji udar mózgu() technika. To polecenie wskazuje określoną ścieżkę lub formularz na płótnie. W drugim rozwiązaniu funkcje moveTo() i lineTo() są połączone w celu ręcznego wygenerowania ścieżki obszaru roboczego i śledzenia granic maski. Korzystając z tych technik, możesz ręcznie określić kształt obramowania i upewnić się, że przylega ono do kształtu maski, a nie do prostokątnej granicy płótna. Masz pełną kontrolę nad wyglądem obramowania, ponieważ Szerokość linii Właściwość ustawia grubość obramowania i Styl udaru właściwość określa jego kolor.

Na koniec funkcja toDataURL() służy do przekształcania obszaru roboczego w ciąg znaków Base64. W ten sposób gotowy obraz – łącznie z maską i obramowaniem – jest przekształcany do formatu, który można łatwo wykorzystać w innych obszarach programu lub przesłać na serwer. Aby uniknąć błędów w synchronizacji, obietnica zapewnia, że ​​operacja ta zakończy się dopiero po całkowitym załadowaniu obu obrazów. Skrypty te pokazują, jak wyrafinowane techniki modyfikacji obrazu, w tym maskowanie i stosowanie dynamicznego obramowania, które dokładnie pasuje do konturów maski, można zrealizować za pomocą elementu canvas JavaScriptu.

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;
    });
}

Ulepszanie zamaskowanych obrazów za pomocą niestandardowych obramowań w JavaScript

Komfort użytkowania aplikacji JavaScript można znacznie poprawić dzięki możliwości maskowania obrazów i ustawiania niestandardowych obramowań podczas pracy z plikami JavaScript API kanwy. Za pomocą maskowania możesz zdecydować, które obszary obrazu będą widoczne w zależności od innego obrazu, zwanego maską. Dodanie obramowania wokół zamaskowanej strefy to problem, z którym spotyka się wielu programistów, szczególnie gdy maska ​​nie ma prostego prostokątnego kształtu. Projekty z ramkami dokładnie dopasowanymi do konturu maski będą wyglądać na bardziej dopracowane i fachowe.

Przydatnym rozwiązaniem tego problemu jest użycie API Canvas Ścieżka2D obiekt. Możesz używać Path2D do projektowania skomplikowanych tras, które pasują do konturów maski, a następnie otaczają je ramką. Ta metoda pozwala wygenerować obramowania dokładnie dopasowane do rogów niestandardowej maski, wykraczające poza konwencjonalne prostokąty. Używanie moveTo() I lineTo() razem ułatwiają prześledzenie konturu maski i gwarantują precyzyjnie wyrównane obramowanie.

Wydajność to kolejny ważny czynnik, który należy wziąć pod uwagę, szczególnie podczas pracy z większymi obrazami lub dynamicznego stosowania obramowań w czasie rzeczywistym. Szybkość aplikacji można zwiększyć, stosując strategie takie jak buforowanie zamaskowanego obrazu, ograniczenie operacji rysowania i usprawnienie procesu renderowania płótna. Nawet w przypadku skomplikowanych lub wymagających ustawień możesz zagwarantować, że procedury maskowania i rysowania krawędzi przebiegną sprawnie, redukując niepotrzebne działania.