JavaScript의 캔버스를 사용하여 마스크된 이미지에 사용자 정의 테두리를 추가하는 방법

방법 1: 캔버스 및 획 방법을 사용하여 마스크된 이미지에 사용자 정의 테두리 추가

마스크된 이미지 주위에 테두리를 만들기 위해 이 접근 방식은 JavaScript와 Canvas API를 사용합니다. Stroke()는 마스크된 모양의 윤곽을 그리는 데 사용됩니다.

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

옵션 2: 캔버스 경로를 사용하여 마스크 모양 주위에 사용자 정의 테두리 만들기

이 방법은 JavaScript와 Canvas API를 사용하여 이미지 마스크 경로를 따라 테두리가 마스크된 모양을 밀접하게 따르도록 합니다.

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

캔버스를 사용한 이미지 마스킹 및 경계 지정에 대해 자주 묻는 질문

1. JavaScript에서 다른 이미지를 사용하여 이미지를 마스킹하려면 어떻게 해야 합니까?
2. 사용 2 로 설정 'source-in', 이미지를 마스크하기 위해 캔버스에 마스크를 그립니다. 캔버스 API. 마스크를 일치시키기 위해 기본 이미지가 잘립니다.
3. 모양에 맞는 마스크된 이미지에 테두리를 어떻게 만들 수 있습니까?
4. 마스크의 경로를 설정한 후 moveTo() 그리고 lineTo(), 사용 stroke() 기술. 이렇게 하면 마스크 모양을 개인화된 테두리로 둘러쌀 수 있습니다.
5. 목적은 무엇입니까? toDataURL() 캔버스 조작에?
6. 캔버스의 내용은 다음을 통해 Base64로 인코딩된 이미지로 변환됩니다. toDataURL() 기능을 사용하여 PNG 이미지로 사용하거나 배포하기가 쉽습니다.
7. 성능을 위해 캔버스 작업을 최적화하려면 어떻게 해야 합니까?
8. 그리기 작업의 양을 줄이고 일반적으로 사용되는 요소를 저장하여 캔버스 속도를 최대화하는 방법을 생각해 보세요. 이렇게 하면 애플리케이션이 원활하게 작동하고 다시 그리는 횟수가 줄어듭니다.
9. 캔버스에 원본 간 이미지를 로드할 수 있나요?
10. 예, 하지만 CORS 문제를 일으키지 않고 이미지를 사용할 수 있게 하려면 다음을 설정해야 합니다. crossOrigin 재산 'anonymous'.

마스킹 및 테두리에 대한 최종 생각

JavaScript 앱에서 캔버스에 이미지를 마스킹하고 사용자 정의 테두리를 적용하는 것은 세련된 시각적 요소를 만드는 효과적인 방법입니다. 개발자는 다음을 활용하여 그림의 렌더링 및 스타일을 조작할 수 있습니다. 캔버스 API 다음과 같은 정교한 그리기 명령이 포함됩니다. 뇌졸중() 및 경로 정의.

특히 대형 사진의 경우 테두리 및 마스킹 작업을 신중하게 최적화하여 원활한 성능이 보장됩니다. 이 튜토리얼은 직사각형이 아닌 이미지 주위에 테두리를 동적으로 그리는 유용한 방법을 제공합니다. 이는 미학적으로 만족스럽고 반응이 빠른 온라인 앱을 개발할 때 유용합니다.