javascript (imageのwidthなどについて）
■imageのプロパティが認識されるタイミングのメモ
ボタンを押すと画像が追加されるjavascriptで、追加した時にそのプロパティを取得して、それに応じた処理をさせたい。
画像の追加は下のコード。ブラウザ起動時はボタンだけ入れておき、クリックするとcheckImg()関数が起動して、同じフォルダの画像ファイルからimgタグを作成して追加する。
<html>
<head>
<meta charset="utf-8">
<script>
function checkImg() {
let filepath = "./samplePic.png";
let imageSample = document.createElement('img');
imageSample.src = filepath;
document.body.appendChild(imageSample);
console.log(imageSample.width);
}
</script>
</head>
<body>
<button type="button" onclick="checkImg()">Click</button>
</body>
</html>画像ファイルは下記のもの（幅300px, 高さ200px）
このコードをブラウザで実行すると、画像ファイルは追加され、コンソール画面には、console.log(imageSample.width)の出力が0として出てくる。もう一度クリックすると再度画像ファイルが追加され、今後は300（画像の幅サイズ）として出てきた。
この300の値を使って、コードの処理分けとかをしたいけど、2回クリックしなければ値が取得できないのでは使えない。何か方法はないか試していると、onloadを使うと一度クリックした状態で値が取得できた。
そのコードが下のもの。imageSample.onloadの部分を追加した。
<html>
<head>
<meta charset="utf-8">
<script>
function checkImg() {
let filepath = "./samplePic.png";
let imageSample = document.createElement('img');
imageSample.src = filepath;
console.log(imageSample.width);
document.body.appendChild(imageSample);
imageSample.onload = () => {
console.log(imageSample.width);
}
}
</script>
</head>
<body>
<button type="button" onclick="checkImg()">Click</button>
</body>
</html>このコードを実行して、デバッグを見ると、ボタンを押した後にcheckImg()が起動して下画像の6行目から順次実行されていく。11行目のonloadの中身はスキップして、18行目のbodyタグ内に戻る。その後、11行目に戻って12行目のコンソールが実行される。画面下の0と300は、それぞれ9行目と12行目の結果となる。
多分bodyタグを一度通って、画像がロードされる必要があると思う。
今回は自分のPC内だけの処理で、これがサーバクライアント間の処理で使用できるか分からないけど、とりあえず画像ファイルの幅は取得できた。
