0

新しく質問を立てた方が良いと言われたので前回の質問の続きになります。
JavaScriptのcolor-thiesというライブラリーを使用してプログラムがimgタグのsrcを書き換えたタイミングでライブラリーを実行したいのですが、書き換わる前に処理が実行されてしまうため上手く画像の色を取得出来ません。
前回の回答者様は画像にloadイベントを持たせると良いと話されていたのですが、いまいち理解出来ていないです。
Observerで書き換えを監視してもタイミングを合わせる事が出来るのではと少し考えています。

class callPythonFnc {
    async getTitle(input, dlcard) {
        let title = await eel.get_title(input.value)();
        dlcard.querySelector('.dlcard__title > .dlcard__videoName').innerText = title;
    }
    async getSrc(videoID, thumbnailIMG) {
        let url = await eel.get_src(videoID)();
        thumbnailIMG.src = url;
    }

}

class thumbnail {
    constructor(){
        this.DOM = {}
        this.DOM.inputURL = document.querySelectorAll('.dlcard__url > input');
        this.DOM.dlcardWrap = document.querySelector(".dlcardWrap");
        this._addEvent();
    }

    getVideoID(input) {
        if (input.value.match(/^https:\/\/www\.youtube\.com\/watch\?v=.*/)) {
            const url = new URL(input.value)
            //urlの?以降の値を取り出す。
            let pairs = url.search.substring(1).split('&');
            let params = {}
            for(let pair of pairs) {
                let kv = pair.split('=');
                //それぞれをpairで辞書型格納する。
                params[kv[0]] = kv[1];
            }
            let videoID = params.v;
            return videoID;
        }else{
            return false;
        }
    }

    changeTitleThumbnail(elm) {
        const input = elm.target;
        if (!input.parentElement.classList.contains("dlcard__url")) {
            console.log('dlcard_urlが取得出来ていないです。')
        }else{
            let videoID = this.getVideoID(input);
            let dlcard = input.closest('.dlcard');
            let thumbnailIMG = dlcard.childNodes[3].childNodes[1];
            if(videoID) {
                new callPythonFnc().getTitle(input, dlcard)
                new callPythonFnc().getSrc(videoID, thumbnailIMG);
            }else{
                input.value = '';
                input.placeholder = 'URLが違います。';
            }
        }
    }

    _addEvent() {
        this.params = {}
        this.DOM.dlcardWrap.addEventListener("blur", this.changeTitleThumbnail.bind(this), true);
    }
}

new thumbnail();

追記

addEventListnerを使用してコードを書いたのですが、指定した要素をコールバック側で取得するにはどうしたら良いのでしょうか?

class callPythonFnc {
    async getTitle(input, dlcard) {
        let title = await eel.get_title(input.value)();
        dlcard.querySelector('.dlcard__title > .dlcard__videoName').innerText = title;
    }
    async getSrc(videoID, thumbnailIMG) {
        let url = await eel.get_src(videoID)();
        thumbnailIMG.src = url;
    }

}

class thumbnail {
    constructor(){
        this.DOM = {}
        this.DOM.inputURL = document.querySelectorAll('.dlcard__url > input');
        this.DOM.dlcardWrap = document.querySelector(".dlcardWrap");
        this._addEvent();
    }

    getVideoID(input) {
        if (input.value.match(/^https:\/\/www\.youtube\.com\/watch\?v=.*/)) {
            const url = new URL(input.value)
            //urlの?以降の値を取り出す。
            let pairs = url.search.substring(1).split('&');
            let params = {}
            for(let pair of pairs) {
                let kv = pair.split('=');
                //それぞれをpairで辞書型格納する。
                params[kv[0]] = kv[1];
            }
            let videoID = params.v;
            return videoID;
        }else{
            return false;
        }
    }

    imgRGB(thumbnailIMG) {
        console.log(thumbnailIMG);
        const colorThief = new ColorThief();
        const thumColor = colorThief.getColor(thumbnailIMG);
        console.log(thumColor);
    }

    changeTitleThumbnail(elm) {
        const input = elm.target;
        if (!input.parentElement.classList.contains("dlcard__url")) {
            console.log('dlcard_urlが取得出来ていないです。')
        }else{
            let videoID = this.getVideoID(input);
            let dlcard = input.closest('.dlcard');
            let thumbnailIMG = dlcard.childNodes[3].childNodes[1];
            thumbnailIMG.addEventListener("load", this.imgRGB, true);
            if(videoID) {
                new callPythonFnc().getTitle(input, dlcard)
                new callPythonFnc().getSrc(videoID, thumbnailIMG);
            }else{
                input.value = '';
                input.placeholder = 'URLが違います。';
            }
        }
    }

    _addEvent() {
        this.params = {}
        this.DOM.dlcardWrap.addEventListener("blur", this.changeTitleThumbnail.bind(this), true);
    }
}

new thumbnail();
4
  • DOMの書き換えとリソースの読み込みが同時に行われない(非同期)ことは理解していますか?Javascriptの実行順序.
    – keitaro_so
    Commented 2020年12月8日 1:55
  • 前回の質問で回答した問題点が1つも直ってないので、まずはそれらを直しましょう。まあこのコードは質問ないようとあまり関係ありませんけども。
    – int32_t
    Commented 2020年12月8日 2:03
  • すいません。前回のコードにしたらTitleを変更した後にサムネを取得するコードになり、遅くなったためif文のインデントだけ変更しました。あとは自分なりに綺麗にしようとリファクタリングしました。逆に読みにくくなっていたらすいません。
    – wataru
    Commented 2020年12月8日 6:53
  • @keitaro_so それも考えないといけない問題ですね。ありがとうございます。記事読みました。
    – wataru
    Commented 2020年12月8日 7:02

1 件の回答 1

0

2通りの方法を紹介します。
<img>要素が変数 img、画像URLが 変数 imageUrl だとすると、

  • コールバック内で直接処理する
img.addEventListener('load', event => {
  // ロード成功したときの処理。event.target に img が入っている。
}, {once:true});
img.addEventListener('error', event => { ロード失敗したときの処理 }, {once:true});
img.src = imageUrl;
  • コールバックをPromiseで包んで、awaitする
function loadImage(img, imageUrl) {
  return new Promise((resolve, reject) => {
    img.addEventListener('load', resolve, {once:true});
    img.addEventListener('error', reject, {once:true});
    img.src = imageUrl;
   });
}

async foo() {
 ....
 await loadImage(img, imageUrl);
 ロード成功したときの処理;
}
5
  • ロード成功した際の処理にライブラリーの内容を追加しようとしているのですが、指定したimgのノードを取得する方法をご存知でないでしょうか?
    – wataru
    Commented 2020年12月8日 9:03
  • @wataru 前者のコード例に書き足しました。
    – int32_t
    Commented 2020年12月8日 14:05
  • @init32_t console.log(thumbnaiIMG)で確認したらtargetプロパティnullだったので別の方法で取得する必要があるかと思いました。ありがとうございます。無事に動作しました。ほんとにありがとうございます。
    – wataru
    Commented 2020年12月8日 14:23
  • @最後に一つ気になる事があるのですが、毎回イベントが走るたびに毎回newする書き方が少し気になるのですが、これはみなさん良く書く書き方なのでしょうか?質問別で立てた方がいいでしょうか?
    – wataru
    Commented 2020年12月8日 14:34
  • @wataru 書かないですね。class callPythonFncはふつう作らないと思います。リファクタリングの質問は既に立てているようなので、そこの質問を具体的にすると良いのではないでしょうか。
    – int32_t
    Commented 2020年12月8日 15:10

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。