자바 스크립트를 사용하여 ID3 이미지 데이터의 이미지 표시

Question

나는 stackoverflow에서 찾을 수있는 모든 방법을 시도했습니다.

Display image from blob using javascript and websockets

How can you encode a string to Base64 in JavaScript?

내가 cloudinary 및 id3js을 사용하고이 두 사람은 가장 완벽한 게시물의 일부입니다. 먼저 mp3 파일을 cloudinary로 업로드 한 다음 id3js를 통해 Ajax로 파일을 요청합니다. 이 은 나에게 모든 ID3 태그를 제공합니다.

openUploadModal() { 
     cloudinary.openUploadWidget(window.cloudinaryOptions, 
     (errors, track) => { 
      if(!values(errors).length) { 

       id3(track[0].secure_url, (errs, tags) => { 
        this.setState({ 
         title: tags.title, 
         audio_url: track[0].secure_url, 
         artist: tags.artist, 
         uploaded: true, 
         cover_photo: this.getImage(tags.v2.image) 
        }); 
       }); 
      } 
     }); 
    } 

그리고 이미지 컨버터 :

그때 백그라운드로 된 GetImage의 반환 값을 사용

getImage(image) { 
    var arrayBuffer = image.data; 
    var bytes = new Uint8Array(arrayBuffer); 

    return "data:image/png;base64,"+btoa(unescape(encodeURIComponent(bytes))); 
} 

이 같은 태그 객체가 모습입니다 div의 -image 속성. 콘솔에는 오류가 없으며 잘못된 요청은 아니지만 데이터를 열 때 : image/jpg, base64, ... 링크 페이지에 작은 흰색 사각형 만 있습니다.

ID3 태그의 이미지 개체에서 작동하는 URL을 어떻게 가져올 수 있습니까?

Answer 1

image.data이 ArrayBuffer 인 경우 FileReader을 사용할 수 있습니다. FileReaderload 이벤트가 비동기 인 경우 Promise을 사용하지 않고 함수의 결과를 반환 할 수 없지만 FileReaderSync()은 Worker에 사용할 수 있습니다.

createImageBitmap alternative on Safari도 참조하십시오.

var reader = new FileReader(); 
reader.onload = function() { 
    // do stuff with `data URI` of `image.data` 
    console.log(reader.result); 
} 
reader.readAsDataURL(new Blob([image.data], {type:image.mime}));