JavaScriptで画像を操作する方法はとても簡単です。
HTMLでimgタグを使った画像の表示ができるのであれば問題ないように、事前にJavaScriptで便利なプロパティが用意されているからです。
本日はJavaScriptでの画像の操作方法を解説していきます。
ReactやVueなどのモダンJSではJavaScriptでの画像表示がよく登場するので、知らない人はこの機会に覚えておきましょう。
また動画もあるので必要に応じて使用してください。
JavaScriptで画像を表示する方法
まずHTMLでの画像の表示をおさらいしておきましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<img src="../images/sumple.png" alt="" id="image" />
</div>
</body>
</html>HTMLではimgタグがあり、src属性に画像のパスを入力すると表示されます。
例えばHTML側でsrc属性を指定していなかったとしても、JavaScript側で同じことができます。
HTMLのsrc属性を空文字にしておきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<img src="" alt="" id="image" />
</div>
</body>
</html>JSファイル側では以下のように書きます。
const image = document.querySelector("#image");
image.src = "../images/sumple.png";HTMLでの書き方と同じでパスを指定するだけです。
HTMLのimgタグにある属性はJS側でも同一名でプロパティが用意されています。
そのため要素に続けて「src」とするだけで、imgタグのsrc属性にアクセスすることができるのです。
とても簡単ですね。
JavaScriptで画像のサイズを変更する方法
src属性と同じような段取りでimgタグの色んな属性をJS側で操作できます。
一例として画像のサイズを変更してみたいと思います。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<img src="" alt="" id="image" />
</div>
</body>
</html>const image = document.querySelector("#image");
image.src = "../images/sumple.png";
// ここから追記
image.width = "100";
image.height = "200";imgタグには「width(横幅のサイズ)」「height(縦幅のサイズ)」の属性があり、こちらも同一名でJS側でプロパティが用意されています。
要素に続けてwidth、heightとするだけで、それぞれwidth属性とheight属性にアクセスすることができます。
またwidth属性とheight属性は共に文字列でサイズを指定するルールになっているので注意してください。
JS側で画像を表示したり操作することで、変数を使った動的な表示やイベントに沿った画像の加工ができるようになります。
ホームページくらいであればHTMLのimgタグにパスを記載すれば良いのですが、アプリやゲームの開発ではJS側で画像を扱うことになるので覚えておきましょう。
また今回参考にした書籍は以下になりますので詳しい内容はご確認ください