1
votes

Modification de la source de la balise d'image dans l'application Electron

J'ai une balise qui représente la couverture de l'album des chansons. Je peux récupérer l'image de couverture de l'album de la chanson à l'aide de l'analyseur music-metadata , comme ceci:

let album_cover = document.getElementById('album-cover')
album_cover.src = new_picture_path

Maintenant, si je regarde la console, j'ai quelque chose comme ceci:

Je peux donc récupérer l'image en utilisant metadata['common'letter['picture'[0. ceci (qui utilise une image par défaut pour la couverture de l'album):

<img id="album-cover" src="assets/images/Album Cover.jpg" width="200px" height="200px">

Je suis conscient que je peux changer cette image en utilisant du JavaScript pur, comme ceci:

const mm = require('music-metadata')
mm.parseFile(music_filepath)
    .then(metadata => {
        console.log(metadata)
    })
    .catch(error => {
        console.error(error.message)
    })

Mais cette méthode utilise chemin de fichier . Comment puis-je changer l'image directement à partir des métadonnées ?

javascript node.js electron

0 commentaires

3 Réponses :

0
votes

vous pouvez définir une img base64 ed

document.getElementById ('imgTest') .setAttribute ('src', 'data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAU // 8 / ==');

0 commentaires

1
votes

Vous pouvez générer une base64 de votre image et la transmettre à l'attribut de votre image en faisant quelque chose comme ceci:

const request = require('request').defaults({ encoding: null });
const mm = require('music-metadata')

const generateBase64 = url  => {
    return new Promise(
        resolve => {
          request.get(url, (error, response, body) => {
          if (!error && response.statusCode == 200) {
              const  data = "data:" + response.headers["content-type"] + ";base64," + new Buffer.from(body).toString('base64')
              return (resolve(data))
          }
          return(resolve(null))
        }
      )}
    )
  }

mm.parseFile(music_filepath)
    .then(async metadata => {
        const base64 = await generateBase64(metadata)
        if (!base64) return;
        const album_cover = document.getElementById('album-cover')
        album_cover.setAttribute('src', base64);
    })
    .catch(error => {
        console.error(error.message)
    })

0 commentaires

0
votes

Grâce à la réponse fournie par aperesso , je l'ai résolu comme ceci.

let acf = metadata['common']['picture'][0]['format'] // album_cover_format
let acd = metadata['common']['picture'][0]['data'] // album_cover_data
album_cover.src = `data:${acf};base64,${Buffer.from(acd).toString('base64')}`

0 commentaires