如何生成 blob url？

Posted 2023-03-22

【中文标题】如何生成 blob url？

【英文标题】：How can i generate a blob url?

【发布时间】：2018-10-01 18:30:29

【问题描述】：

我有一个函数可以确定 gif 是动画还是非动画。一切正常，直到我将这些 gif 上传到服务器并加载它，blob url 是一个空字符串。我怎样才能为此生成一个 blob url？

由于blob url是空字符串，我得到参数1不是'blob'类型

下面的函数确定 gif 是否为动画。

$scope.isNotAnimatedGIF = function(file) 
  var reader = new FileReader();
  return new Promise(function(resolve, reject) 
    reader.onload = function (e) 
      var gifInfo = gify.getInfo(reader.result);
      if (gifInfo.images.length <= 1) 
        file.animatedGIF = false;
        resolve(true);
       else 
        file.animatedGIF = true;
        resolve(false);
      
    
    reader.readAsArrayBuffer(file);
  );

我正在使用 Angular 1.4.10 谢谢！

【问题讨论】：

我不确定，但你试过reader.readAsDataURL(file); 吗？和function(e) $scope.$apply(function() $scope.path = e.target.result; // blob url );

【参考方案1】：

试试这个reader.readAsDataURL(Blob|File)。

您可以通过here找到更多信息

【讨论】：

谢谢！会试试看！

【参考方案2】：

您可以使用URL.createObjectURL() 创建Blob url。

URL.createObjectURL() 静态方法创建一个DOMString，其中包含一个表示参数中给定对象的 URL。 URL 生存期与创建它的窗口中的document 相关联。新的对象 URL 表示指定的File 对象或Blob 对象。

演示

function createbloburl(file, type) 
  var blob = new Blob([file], 
    type: type || 'application/*'
  );

  file = window.URL.createObjectURL(blob);

  return file;

document.querySelector('#file').addEventListener('change', function(e) 
  var file = e.currentTarget.files[0];
  if (file) 
    file = createbloburl(file, file.type);
    document.querySelector('iframe').src = file;
    //console.log(file)
  
)

<input id="file" type="file">

<iframe src=""></iframe>

【讨论】：

谢谢，试试看！

我已经尝试了这两个建议，我发现，它不是导致问题的 blob url 丢失。问题是，从服务器加载文件后，它变成了对象类型而不是文件类型，我尝试将对象更改为文件类型，但文件大小与原始文件完全不同

从服务器端你得到 base64 或其他什么？

我从服务器获取整个对象类型，而不是文件类型。对于这个问题，我决定阻止用户保存动画GIF，这样我就可以避免这个问题。

你能提供你的整个对象吗？所以我可以尝试在blob中转换。为此*我决定阻止用户保存动画GIF，这样我就可以避免这个问题*你可以在img标签上使用accept属性。