편집 기록

프로필 엽토군님의 편집

날짜2021.09.03

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

html5

javascript

css

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

약 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%;
}

프로필 알 수 없는 사용자님의 편집

날짜2021.09.03

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

html5

javascript

css

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

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

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

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

코드는 이렇습니다.

index.html -->

<!DOCTYPE html>

app.js -->

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);

}

}

style.css -->

{ 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%; }