html, 자바스크립트에서 이미지가 적용안되는 이유가 무엇일까요

조회수 75회

안녕하세요, 유튜브에서 인터렉티브 디벨로퍼님의 자바스크립트로 사진을 픽셀화 시키는 프로그램 영상을보고 무작정 그대로 따라 만들고 있습니다.

약 3분 15초까지의 내용까지 따라했는데, 원래라면 삽입한 이미지 파일이 떠야하는데 검은 화면만 뜨는데 원인을 모르겠습니다..

(혹시 해서 영상링크 첨부해봅니다. 문제가 된다면 삭제하겠습니다. https://www.youtube.com/watch?v=kpF0n39xXVM)

gogh1.jpg파일은 html파일과 같은 위치에 저장되어있습니다. 감사합니다.

코드는 이렇습니다.

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1,
        maximum-scale=1, user-scalable=0">
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <script type="module" src="app.js"></script>
    </body>
</html>
class App {
    constructor() {
        this.canvas = document.createElement('canvas');
        document.body.appendChild(this.canvas);
        this.ctx = this.canvas.getContext('2d');

        this.pixelRatio = window.devicePixelRatio  > 1 ? 2 : 1;


        window.addEventListener('resize', this.resize.bind(this), false);
        this.resize();

        this.isLoaded = false;
        this.imgPos = {
            x: 0,
            y: 0,
            width: 0,
            height: 0,
        };

        this.image = new Image();
        this.image.src = "gogh1.jpg";
        this.image.onload = () => {
            this.isLoaded = true;
            this.drawImage();
        };

        window.requestAnimationFrame(this.animate.bind(this));

    }

    resize() {
        this.stageWidth = document.body.clientWidth;
        this.stageHeight = document.body.clientHeight;

        this.canvas.width = this.stageWidth * this.pixelRatio;
        this.canvas.height = this.stageHeight * this.pixelRatio;
        this.ctx.scale(this.pixelRatio, this.pixelRatio);


        if (this.isLoaded) {
            this.drawImage();
        }
    }

    drawImage() {
        const stageRatio = this.stageWidth / this.stageHeight;
        const imgRatio = this.image.width / this.image.height;

        this.imgPos.width = this.stageWidth;
        this.imgPos.height = this.stageHeight;

        if (imgRatio > stageRatio) {
            this.imgPos.width = Math.round(
                this.image.width * (this.stageHeight / this.image.height)
            );
            this.imgPos.x = Math.round(
                (this.stageWidth - this.imgPos.width) / 2
            );
        } else {
            this.imgPos.height = Math.round(
                this.image.height * (this.stageWidth / this.image.width)
            );
            this.imgPos.y = Math.round(
                (this.stageHeight - this.imgPos.height) / 2
            );
        }

        this.ctx.drawImage(
            this.image,
            0, 0,
            this.image.width, this.image.height,
            this.imgPos.x, this.imgPos.y,
            this.imgPos.width, this.imgPos.height,
        );


    }


    animate() {
        window.requestAnimationFrame(this.animate.bind(this));

        this.ripple.animate(this.ctx);

    }


}
* {
    outline: 0;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: relative;
}

canvas {
    width: 100%;
    height: 100%;
}

1 답변

  • 안녕하세요!

    올려주신 코드가 직접 작성하신 코드의 전부라면, 아무것도 안보이는 이유는 클래스를 정의는 하셨는데 한번도 initiate 되지 않았네요.

    마지막줄에 아래의 코드 한 줄만 넣어보시면 사진이 나오긴 합니다!

    new App();

    갓종민님 영상 훑어보니 window.onload 로 같은 작업 해주시는데, 질문자님이 따라하시는 과정 중에 이 부분을 빼먹으신 것은 아닐까 싶네요. 종민님코드:

    window.onload = () => { new App(); }

    혹시 도움이 됐으면 좋겠네요!!

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.