Image とは
- ここで説明する Image とは次の語句からなる javascript のコンストラクターです。
- image
- 読み: イメージ
意味: 画像、映像、形象、印象
Image オブジェクトの概要
このコンストラクターは、Image オブジェクトを生成します。
これを少し実践的に表現するならば、 「 Image は HTMLImageElement を生成するためのコンストラクター 」 だと言えます。
つまり、これは Image クラスから Image 型のオブジェクトを生成するためのメソッドであり、 img 要素をオブジェクト型の変数に格納するためにも使われます。
コンストラクターの引数には ( width, height ) のプロパティが予め備わっており、 この引数は省略することが可能です。 なお、width, height 以外の プロパティは 後付けで追加することになります。
筆者にとっては、あまり用途がないクラスに感じますが、このオブジェクトを使うことにより Web ページ上での画像要素の取り回しが向上するのかもしれません。
構文
サンプルを見る前に構文を確認しておきます。
var objImage = new Image(width, height)サンプルコードと実行結果
ここでは、ボタン要素の data- 属性に src と alt のデーターを忍ばせています。
このボタンをクリックすることで、funOutImg() 関数を呼び出すのですが、ここで この関数の引数に先ほどの data- 属性の値を与えます。 関数は与えられた src と alt の値を使って Image オブジェクトの プロパティを書き換えます。
サンプルコード: CSS
<style>
#idOutImg{
display: block;
background-color: ##lightgray;
border: thin solid ##darkgray;
margin: 1em 0;
width: 200px;
height: 260px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
</head>
<body>
<div><button onclick="funOutImg(this.dataset.src, this.dataset.alt)" data-src="./sample1.jpg" data-alt="サンプル画像1"> 画像 1 を表示 </button></div>
<div><output id="idOutImg"> </output></div>
<div><button onclick="funOutImg(this.dataset.src, this.dataset.alt)" data-src="./sample2.jpg" data-alt="サンプル画像2"> 画像 2 を表示 </button></div>
<script>...</script>
</body>
サンプルコード: script
<script>
let elmOutImg = document.getElementById("idOutImg");
let objImage = new Image(200, 260);
function funOutImg(receiveSrc, receiveAlt){
objImage.src = receiveSrc;
objImage.alt = receiveAlt;
elmOutImg.insertAdjacentElement("afterbegin", objImage);
}
</script>
- 03: let objImage = new Image(200, 260) (Image オブジェクトを生成しています。引数は width=200, height=260 にしています。)
- 05: objImage.src = receiveSrc (Image オブジェクトに src プロパティを付けて関数の引数を代入しています。)
- 06: objImage.alt = receiveAlt (Image オブジェクトに alt プロパティを付けて関数の引数を代入しています。)