[opencv] opencv.js Getting Started with Images

opencv.js에서 어떻게 이미지를 읽고 웹에 표시하는지에 대해 공부해보았다. HTML HTML 요소는 다음과 같이 설정했다. click button READ an image opencv.js 는 이미지를 cv.Mat 타입으로 저장한다. HTML의 canvas 요소를 cv.Mat로 받을 수 있고 역도 성립한다. ImageData 인터페이스는 canvas 요소 영역의 기본 픽셀 데이터를 표현, 설정할 수 있다. 1. 이미지 데이터 객체를 캔버스로 부터 생성하기 html 요소가 canvas가 아닌 경우 file이 업로드 되었을 때 img의 src를 file의 src로 넣어준다. e.target.files = FileList {0: File, length: 1} File: {name: 'dog.jpg', l..

• format_list_bulleted 📦 개발/opencv
• · 2023. 1. 15.

[JAVASCRIPT] addEventListener()

addEventListener()는 documnet 요소에 event를 부여할 때 사용. addEventListener(event, 실행할 함수) 로 정의한다. 총 3가지의 방법으로 정의할 수 있다. button.addEventListener('이벤트', 함수명) button.addEventListener('이벤트', 익명함수정의); button.addEventListener('이벤트', ()=>{}); 대부분 화살표 함수를 사용하여 정의한다. var button = document.getElementById('btn'); function clickButton() { alert("버튼을 클릭하였습니다."); } // case 1 button.addEventListener('click', clickButt..

• format_list_bulleted 📦 개발/JavaScript
• · 2023. 1. 14.

[opencv] opencv.js template matching

openCV는 Open Source Computer Vision의 약자로 영상,이미지 처리에 사용할 수 있는 오픈 소스 라이브러리이다. 머신러닝 관련 부분에도 활용도를 높여가고 있다. openCV.js 사용 opencv.js의 사본을 얻는 방법으로 https://docs.opencv.org/4.5.0/opencv.js 를 참고하였다. 코드는 https://docs.opencv.org/4.x/d0/d84/tutorial_js_usage.html 을 참고하였다. Hello OpenCV.js OpenCV.js is loading... imageSrc canvasOutput openCV Template Matching 사용자의 입력 이미지에서 머신러닝 없이 원하는 부분의 객체가 어디에 위치하는지 알아보다 ope..

• format_list_bulleted 📦 개발/opencv
• · 2023. 1. 14.

[JAVASCRIPT] onload()

웹 페이지가 로딩되었을 때 로딩된 이벤트에 맞춰 원하는 함수, 코드를 호출할 수 있도록 한다. 대표적으로 window.onload 콜백함수가 있다. window.onload window.onload = function() { alert("윈도우 창이 켜졌을 때 바로 실행됨"); } 실행화면 한번에 실행될 load 메서드가 1개보다 많을 시 마지막 onload 메서드만 실행된다. window.onload = function() { alert("윈도우 창이 켜졌을 때 바로 실행됨"); } window.onload = function() { alert("한번에 실행 될 onload 메소드가 1개보다 많을 시 제일 마지막만 실행."); } 실행화면 태그에서 onload 실행화면 특정객체에서 onload 0 실행..

• format_list_bulleted 📦 개발/JavaScript
• · 2023. 1. 11.

[JAVASCRIPT] 이론 2

prototype 프로퍼티 모든 함수는 객체로서 prototype 프로퍼티를 가지고 있다. prototype 프로퍼티는 함수가 생성될 때 만들어지며 constructor 프로퍼티 하나만 있는 객체를 가리킨다. constructor 프로퍼티는 prototype 프로퍼티를 참조하며 서로 참조하는 관계를 가진다. 함수의 다양한 형태 자바스크립트에서 함수 표현식에서 함수이름은 필수 사항이 아니다. 함수이름을 붙이지 않은 것을 익명함수라고 하고 대표적으로 콜백함수가 있다. 콜백함수 콜백 함수란 코드를 통해 명시적으로 호출되는 함수가 아닌 어떤 이벤트나 특정 시점에 도달했을때 시스템에서 호출되는 함수를 말한다. 이벤트 발생 -> 이벤트 핸들러가 함수 호출 -> 콜백함수 (개발자가 등록) window.onload 이..

• format_list_bulleted 📦 개발/JavaScript
• · 2023. 1. 4.

[JAVASCRIPT] 이론 1

JavaScript - 1 자바스크립트는 하나의 숫자형 Number 타입만 존재하고 double과 같이 64비트 실수로 저장한다. var num = 5 / 2; console.log(num); // 2.5 console.log(Math.floor(num)); // 2 console.log(Math.ceil(num)); // 3 in 키워드를 사용하였을 경우 property의 키 값에 해당된다 배열의 경우 인덱스, 프로퍼티의 경우 key 값 var str = "my test"; for (str_temp of str) { console.log(str_temp); } // m y t e s t 출력 for (str_temp in str) { console.log(str_temp); 객체 객체 생성 두가지 방법..

• format_list_bulleted 📦 개발/JavaScript
• · 2023. 1. 3.