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%;
}
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!!
© 2024 OneMinuteCode. All rights reserved.