임이지의 블로그

node.js 가 설치되어있다고 가정합니다. 만약 설치되어 있지 않다면 https://nodejs.org/ko/ 에서 설치하기시 바랍니다. VUE CLI 설치 -g 옵션으로 글로벌로 설치한다. npm install -g @vue/cli 프로젝트 생성 painter-vuetify라는 이름으로 생성한다. vue create painter-vuetify Vue2.x 버전대를 사용하고 있어 Default [Vue 2]를 선택했다. 설치가 완료되면 아래와 같은 화면이 나타난다. dir 명령으로 디렉터리를 확인하면 아래와 같다. tree 명령으로 확인하면 다음과 같다. Localhost 실행 아래 명령으로 실행한다. Vue 만 설치되어 있는 상태이다. npm run serve Vuetify 설치 npm 명령으로 v..

Web/개발 환경 2021. 6. 18. 10:19

Painter.vue를 작성하는 도중 위와 같은 오류가 발생했다. 원인을 알고서는 나중에 허탈했다. Drawing with mousemove event Canvas not supported 캔버스 되돌리기 캔버스 초기화 캔버스 저장하기 methods: 에서 stopDrawing(e) 함수가 문제였다. 아주아주 단순한 this. 키워드를 명시하지 않아서 발생한 문제였다. stopDrawing(e) { if (this.isDrawing) { this.drawLine(this.x, this.y, e.offsetX, e.offsetY); this.x = 0; this.y = 0; this.isDrawing = false; console.log(this.isDrawing); } 사소한 문제였는데 원인 찾느라고 고..

Web/개발 환경 2021. 6. 17. 12:47

오류 내용 npm run dev 명령을 실행 시 아래와 같은 오류가 나타났다. 해결안 npm 이 설치되어 있지 않아서 생긴 문제이다. 커맨드 창에서 npm install 명령을 입력한다. npm이 install이 완료되면 아래 명령어를 입력한다. npm run dev

Web/개발 환경 2021. 6. 11. 16:34

Vue.js 를 사용하기 위한 기본 환경설정을 구성합니다. Atom Editor 및 Seti Theme 와 language-vue 환경설정을 합니다. https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io atom.io 에 접속하여 각 플랫폼에 맞는 환경으로 다운로드합니다. 스플래시 ..

Web/개발 환경 2021. 6. 11. 11:23

TensorFlow.js 를 사용하다가 Canvas 객체의 이미지 데이터를 접근하려 하다가 아래 오류가 발생하였다. drawCanvas는 HTML에서 선언한 이미지를 그리는 용도로 사용하였다. // HTML 선언부 // shape img 객체를 canvas 에 그리는 코드 function imageDraw() { var img = document.getElementById("shape"); ctx.drawImage(img, 0, 0); } // canvas 의 데이터를 접근하여 추론 하는 코드 async function predict() { // predict can take in an image, video or canvas html element var canvas = document.getEleme..

Web/HTML JS 2021. 5. 11. 11:13

Teacable Machine 을 이용하여 모델을 javascript 에서 사용하는 형태로 export 하면 아래와 같은 example 코드를 확인 할 수 있다. 상기 코드는 webcam 의 canvas 의 영상을 전송 받아서 tensorflow 로 추론 하는 코드이다. Teachable Machine Image Model Start 모델을 로드 하는 코드 모델을 로드하는 코드는 아래와 같다. Teachable Machine 으로 만든 모델을 로드하는 코드이다. const URL = "https://teachablemachine.withgoogle.com/models/VS7xWXrlQ/"; let model, webcam, labelContainer, maxPredictions; // Load the i..

Web/HTML JS 2021. 5. 10. 20:55

HTML 상에 Canvas에서 그려진 객체를 이미지로 업로드하는 방법에 대해서 조사하였다. toDataURL toDataURL란? HTML5 Canvas의 제공 함수 중에 하나이며 Canvas의 내용을 data URL 문자열로 변환한다. 원하는 인코딩 타입으로 변환 가능 변환된 데이터 - data : 마임 타입; base64, 이미지를 변환한 문자열 toDataURL 메서드를 사용하여서 canvas를 이미지로 변환하는 코드이다. toDataURL의 경우 모질라 파이어 폭스에서는 image/jpeg, image/webp 두 가지만 허용함으로 주의해야 한다. 브라우저마다 API의 지원범위가 조금씩 다르다. var dataUrl = canvas.toDataURL("image/jpeg"); var blobDat..

Web/HTML JS 2021. 5. 10. 15:25

티스토리 상에 이미지를 첨부하고 테스트를 해보겠다. 상기 이미지는 아래의 경로를 갖는다. https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblx41k%2Fbtq31asAHuU%2FnkcKYglcscK8pd60WNysNk%2Fimg.jpg IMG Tag로 이미지 출력 IMG Tag 로 아래와 같이 티스토리에 업로드된 이미지 주소를 출력하였다. Canvas 객체를 생성하여 이미지를 그리는 코드 Your browser does not support the HTML5 canvas tag. 상기 코드는 canvas를 생성하고 이전의 생성한 img 객체를 canvas 에 드로잉 하는 ..

Web/HTML JS 2021. 5. 4. 10:09