html, why can't images be applied in JavaScript?

Hello, I'm watching a program video on YouTube that pixelates photos with the interactive developer's JavaScript and just follow it.

I followed the contents up to about 3 minutes and 15 seconds, but I don't know the cause because the inserted image file should appear.

(I'm attaching a video link by any chance. If it's a problem, I'll delete it. https://www.youtube.com/watch?v=kpF0n39xXVM)

The gogh1.jpg file is stored in the same location as the html file. Thank you.

Here's the code.

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

html5 javascript css

2022-09-20 15:08

1 Answers

If the code you uploaded is all of the code you wrote yourself, the reason why you can't see anything is because you defined the class, but it has never been initialized.

If you put one line of code below in the last line, you'll get a picture!

new App();

I looked through God Jong-min's video and he was working on the same thing as window.onload, but I think he missed this part while he was copying you. Jongmin's code:

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

I hope it helps!!

2022-09-20 15:08

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656