如何从实际 url 生成 blob url

Question

如何将视频源 url 像http://localhost:3000/videos/abc.mp4为 blob url

let dataUrl = "http://localhost:3000/videos/abc.mp4"
this.videoBlobUrl = URL.createObjectURL(dataUrl);

Answer 1

您正在寻找的只是fetch's blob function

fetch("URL")
   .then(response => response.blob())
   .then(blobData => /* you got the blob data */)
   .catch(reason => /* handling errors */)

您也可以使用URL.createObjectURL(blobData); 按照所说的创建临时 URL

例如

 fetch("https://i.picsum.photos/id/682/200/300.jpg").then(r => r.blob()).then(blobData => console.log(URL.createObjectURL(blobData))).catch(console.error)

Answer 2

什么是斑点 url？

在我看来，它甚至不是互联网上的真正标准。

我总是用我自己的方式来生成一个“blob url”。

为此，我会使用（在 javascript 中）：

var 
dataURL = 'http://localhost:3000/videos/abc.mp4',
generateRandomID = function() {
  var 
  r = '',
  returnLength = 10,
  cipher='abc0123';
  for (var i=0; i<returnLength; i++) {
    r += cipher.substr(Math.random() * cipher.length, 1)
  };
  return r;
},
generateBlobURL = function (url) {
  var 
  urlStripped = url.replace('http://localhost:3000/videos',''),
  r = urlStripped + generateRandomID();
  return r;

},
dataURL_blob = generateBlobURL (dataURL);

并且不要忘记使用 F12 按钮来测试此代码，并查看其中的错误可能在哪里:)