新しく質問を立てた方が良いと言われたので前回の質問の続きになります。
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();
if文
のインデントだけ変更しました。あとは自分なりに綺麗にしようとリファクタリングしました。逆に読みにくくなっていたらすいません。