html, 자바스크립트에서 이미지가 적용안되는 이유가 무엇일까요
조회수 701회
안녕하세요, 유튜브에서 인터렉티브 디벨로퍼님의 자바스크립트로 사진을 픽셀화 시키는 프로그램 영상을보고 무작정 그대로 따라 만들고 있습니다.
약 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(); }
혹시 도움이 됐으면 좋겠네요!!
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력