[Vue.js] Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'

이런 에러가 발생했다.

작성한 코드는 아래와 같다.

...생략...
openImage: function () {
            this.outCanvas = document.getElementById("outCanvas");
            this.outCtx = this.outCanvas.getContext("2d");

            //url 지우기(누수 막기)
            this.imgURL = URL.revokeObjectURL(this.imgURL);

            this.inFile = this.$refs["image"].files[0];
            //그림 파일을 이미지 객체로 불러오기
            let inImg = new Image(); //이미지 객체 생성
            //src로 넣을 url 만들기
            this.imgURL = URL.createObjectURL(this.inFile);
            //src에 url 넣기
            inImg.src = this.imgURL;

            const _this = this;
            inImg.onload = function () {
                //입력 파일의 크기 알아내기
                _this.inWidth = inImg.width;
                _this.inHeight = inImg.height;
...생략...
},

 

알아보니 이 두줄이 onload 안에 있어야 한다.

this.outCanvas = document.getElementById("outCanvas");
this.outCtx = this.outCanvas.getContext("2d");

 

 

끝