본문 바로가기

전체 글108

cordova preview 다음은 Cordova plugin camera preview를 사용해 이미지를 캡처하고, img.onload 이벤트에서 를 활용하는 간단한 샘플 코드입니다.이 샘플은 다음 과정을 보여줍니다: 1. cordova-plugin-camera-preview를 사용해 사진 캡처 2. base64 이미지 데이터를 태그로 로드 3. img.onload에서 로 이미지 그리기⸻1. 필요한 Cordova 플러그인 설치cordova plugin add cordova-plugin-camera-preview⸻2. HTML 구조 Capture ⸻3. JavaScript 코드 (js/app.js)document.addEventListener('deviceready', onDeviceReady, false);func.. 2025. 5. 16.
normalize 개선 function normalizeLighting(ctx, width, height) { const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; let minY = 255, maxY = 0; // 첫 번째 루프: 밝기 범위 계산 (Y = 0.299R + 0.587G + 0.114B) for (let i = 0; i const y = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]; if (y if (y > maxY) maxY = y; } const range = maxY - minY || 1; // 두 번째 루프: 밝.. 2025. 5. 16.
6색 좌표 빛제거 물론입니다! 아래는 다음 조건을 모두 포함한 완성된 HTML+JavaScript 코드입니다:⸻포함된 기능: 1. 이미지를 업로드하면 2. 좌상단 90% x 60% 영역만 사용 3. 조명 보정(normalizeLighting)을 적용 4. 2x3 블록으로 나누고 5. 각 블록의 중심 30% 영역에서 평균 색상(RGB) 추출⸻전체 코드: Upload Image ⸻출력 예 (콘솔):Extracted Colors: [ { r: 255, g: 0, b: 0 }, // 빨강 { r: 0, g: 255, b: 0 }, // 초록 { r: 0, g: 0, b: 255 }, // 파랑 { r: 255, g: 255, b: 0 }, // 노랑 { r: 255, g: 255, b: 255 },.. 2025. 5. 16.
6색 추출 좌표 기준 아래는 자바스크립트 (JavaScript) 와 HTML Canvas API 를 이용해 이미지를 로드하고, 말씀하신 방식으로 2x3 영역으로 나누어 중심 30% 영역의 평균 색상을 추출하는 코드입니다.⸻전체 코드 예제 ⸻주요 포인트 정리: • 를 사용해 이미지 업로드 • 캔버스에서 이미지의 좌측 상단 90% x 60% 영역만 그림 • 그 영역을 2x3 블록으로 나눈 후 각 블록의 중심 30% 영역 추출 • 해당 중심 부분의 픽셀 색상 평균(RGB) 계산⸻예시 출력:Extracted Colors: [ { r: 255, g: 0, b: 0 }, // 빨강 { r: 0, g: 255, b: 0 }, // 초록 { r: 0, g: 0, b: 255 }, // 파랑 { r: 255, g.. 2025. 5. 16.