[javascript] Blob URL을 일반 URL로 변환

Program / 글쓴이

내 페이지는 다음과 같은 URL을 생성합니다 "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f". 일반 주소로 어떻게 변환 할 수 있습니까?

<img>의 src속성 으로 사용하고 있습니다.

답변

JavaScript에서 생성 된 URL Blob은 “일반”URL로 변환 할 수 없습니다.

blob:브라우저가 현재 메모리에 가지고 URL이이 서버에있는 데이터를 참조하지 않고, 현재의 페이지에 대한 데이터를 의미합니다. 다른 페이지에서는 사용할 수 없으며 다른 브라우저에서는 사용할 수 없으며 다른 컴퓨터에서는 사용할 수 없습니다.

따라서 일반적으로 BlobURL을 “일반”URL 로 변환하는 것은 의미가 없습니다 . 일반 URL을 원한다면 브라우저에서 서버로 데이터를 보내고 서버가 일반 파일처럼 사용할 수 있도록해야합니다.

최소한 Chrome 에서는 blob:URL을 URL로 변환 할 수 있습니다 data:. AJAX 요청을 사용하여 다음에서 데이터를 “가져올”수 있습니다.blob: URL (실제로는 HTTP 요청이 아니라 브라우저 메모리 것임에도 불구하고).

예를 들면 다음과 같습니다.

var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
   var recoveredBlob = xhr.response;

   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     window.location = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send();

스 니펫 확장

data:URL은 아마도 “일반”이 의미하는 것이 아니며 문제가 될 수 있습니다. 그러나 공유 할 수 있다는 점에서 일반 URL처럼 작동합니다. 현재 브라우저 또는 세션에 국한되지 않습니다.

답변

blob URL에서 데이터 URL을 만드는 또 다른 방법은 캔버스를 사용하는 것입니다.

var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
context.drawImage(img, 0, 0) // i assume that img.src is your blob url
var dataurl = canvas.toDataURL("your prefer type", your prefer quality)

내가 mdn에서 본 것처럼 canvas.toDataURL은 브라우저에서 잘 지원됩니다. (ie <9 제외, 항상 ie <9)

답변

blob url 비디오 / 오디오를 다운로드하는 방법을 찾고있는 사람들 에게이 답변은 저에게 효과적 이었습니다. 즉, 당신은을 통해 원하는 웹 페이지에 * .m3u8 파일을 찾을 필요가 크롬 > – 네트워크 탭 과에 붙여 넣습니다 VLC 플레이어 .

또 다른 가이드는 VLC Player로 스트림 을 저장하는 방법을 보여줍니다 .

답변

이전 답변에서 말했듯이 크롬 devtools 패널에서 보려고 할 때도 URL로 다시 디코딩 할 수있는 방법이 없습니다. URL은 여전히 ​​blob으로 인코딩 될 수 있습니다.

그러나 데이터를 가져올 수 있으며 데이터를 얻는 또 다른 방법은 앵커에 넣고 직접 다운로드하는 것입니다.

<a href="blob:http://example.com/xxxx-xxxx-xxxx-xxxx" download>download</a>

이것을 blob url이 포함 된 페이지에 삽입하고 버튼을 클릭하면 콘텐츠가 표시됩니다.

또 다른 방법은 프록시 서버를 통해 ajax 호출을 가로채는 것입니다. 그러면 실제 이미지 URL을 볼 수 있습니다.

답변