問題
画像から色の情報を取得したく color-thies というライブラリーを使用しています。
途中で画像のsrcパスを書き換えて別の画像に差し替える処理があるのですが、その際タイミングが合わず前の画像の値になってしまいます。
プログラム動作
inputのフォーカスが別の要素に移った際に下記のイベントリスナーが発火します。それでURLの値があればサムネイルを取得します。その画像の色を取得したくcolor-thiesを使用しています。 サムネイルはダウンロードしてローカルのpathをimgのsrcを書き換えて表示しています。
そのタイミングが合わなくて前に設定されている色が取得されてしまいます。おそらくsrcを書き換える前に colorThief.getColor(thumbnailIMG)
が実行されているためだと思います。画像の主に使用される色がRGBの値が配列になって返ってきます。
dlcard
<div class="dlcard">
<div class="dlcard__title">
<svg class="icon icon-youtube"><use xlink:href="#icon-youtube2"></use></svg>
<div class="dlcard__videoName">Supreme bot</div>
</div>
<div class="dlcard__thumbnail">
<img src="images/error.png" alt="">
</div>
<div class="dlcard__url">
<input type="url" name="url01" size="18" placeholder="URL:https://www.youtube.com/watch?v=">
</div>
</div>
javascript
addEventListenerなのですが、まだリファクタリング出来ていなくてとても汚いです。申し訳ありません。
this.DOM.dlcardWrap.addEventListener("blur",
function (elm) {
const input = elm.target;
if (input.parentElement.classList.contains("dlcard__url")) {
if (input.value.match(/^https:\/\/www\.youtube\.com\/watch\?v=.*/)) {
const url = new URL(input.value)
let pairs = url.search.substring(1).split('&');
let params = {}
for(let pair of pairs) {
let kv = pair.split('=');
params[kv[0]] = kv[1];
}
let videoID = params.v;
let dlcard = input.closest('.dlcard');
let thumbnailIMG = dlcard.childNodes[3].childNodes[1];
if(videoID) {
async function run() {
let title = await eel.get_title(input.value)();
dlcard.querySelector('.dlcard__title > .dlcard__videoName').innerText = title;
}
run();
async function getSrc() {
let url = await eel.get_src(videoID)();
thumbnailIMG.src = url;
}
getSrc();
// Make sure image is finished loading
const colorThief = new ColorThief();
if (thumbnailIMG.complete) {
console.log(thumbnailIMG);
const thumColor2 = colorThief.getColor(thumbnailIMG);
console.log(thumColor2);
}
}
}else{
input.value = '';
input.placeholder = 'URLが違います。';
}
}else{
console.log('dlcard_urlが取得出来ていないです。')
}
}, true);
}
Javascriptについて勉強中で詳しい方助けて下さいお願いします。