如何用新的 Blob 构造函数替换已弃用的 BlobBuilder？

Posted 2023-02-24

【中文标题】如何用新的 Blob 构造函数替换已弃用的 BlobBuilder？

【英文标题】：How to replace the deprecated BlobBuilder with the new Blob constructor?

【发布时间】：2013-02-08 11:13:48

【问题描述】：

由于 Blobbuilder 已被弃用，而且我最近决定使用新的面部识别 API，因此我很难切换到“blob”。

function dataURItoBlob(dataURI, callback) 
        // convert base64 to raw binary data held in a string
        // doesn't handle URLEncoded DataURIs

        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) 
            byteString = atob(dataURI.split(',')[1]);
         else 
            byteString = unescape(dataURI.split(',')[1]);
        

        // separate out the mime component
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to an ArrayBuffer
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) 
            ia[i] = byteString.charCodeAt(i);
        

        // write the ArrayBuffer to a blob, and you're done
        var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);
        return bb.getBlob(mimeString);

我尝试将其切换为：

        // write the ArrayBuffer to a blob, and you're done
        var Blob = window.URL || window.webkitURL;
        var bb = new Blob();

        /*var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = window.URL.createObjectURL(blob);
        document.body.appendChild(link);*/

        /*var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);*/
        return bb.getBlob(mimeString);

但我在控制台中不断收到Uncaught TypeError: Object #<URL> has no method 'getBlob'。不知道我错过了什么。如果我尝试使用bb.append(ab);，我会在控制台中得到Uncaught TypeError: Object #<Blob> has no method 'append'。

【参考方案1】：

从BlobBuilder 切换到Blob 非常简单。尝试以下向后兼容的代码（catch 块中的内容是您的原始代码）：

...
    try 
        return new Blob([ab], type: mimeString);
     catch (e) 
        // The BlobBuilder API has been deprecated in favour of Blob, but older
        // browsers don't know about the Blob constructor
        // IE10 also supports BlobBuilder, but since the `Blob` constructor
        //  also works, there's no need to add `MSBlobBuilder`.
        var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);
        return bb.getBlob(mimeString);
    

【讨论】：

在我的帖子更新中，我尝试了你的代码并收到'Uncaught TypeError: undefined is not a function'

@shayward 使用我的答案中的代码，无需任何修改：使用您的原始函数，并用我的代码替换最后几行 (var BlobBuilder ...... )。

感谢工作，只是键入后出现错误：mimeString。缺少右括号。但是对于未来，这也会被删除吗？

@shayward Blob 构造函数在latest version of the specification 中定义。因此，除非规格再次更改，否则您将是安全的。有关兼容性，请参阅caniuse.com/blobbuilder。

【参考方案2】：

Blob = (function() 
  var nativeBlob = Blob;

  // Add unprefixed slice() method.
  if (Blob.prototype.webkitSlice) 
    Blob.prototype.slice = Blob.prototype.webkitSlice;  
  
  else if (Blob.prototype.mozSlice) 
    Blob.prototype.slice = Blob.prototype.mozSlice;  
  

  // Temporarily replace Blob() constructor with one that checks support.
  return function(parts, properties) 
    try 
      // Restore native Blob() constructor, so this check is only evaluated once.
      Blob = nativeBlob;
      return new Blob(parts || [], properties || );
    
    catch (e) 
      // If construction fails provide one that uses BlobBuilder.
      Blob = function (parts, properties) 
        var bb = new (WebKitBlobBuilder || MozBlobBuilder), i;
        for (i in parts) 
          bb.append(parts[i]);
        
        return bb.getBlob(properties && properties.type ? properties.type : undefined);
      ;
            
  ;
());

在您打算使用 Blob 之前将其包含在内，您将能够在仅支持已弃用的 BlobBuilder 的浏览器中使用 Blob 构造函数。

【讨论】：

在此添加一些 cmets 可能会有所帮助，以明确每个部分在做什么。

是的，这将使它在未来对其他人更有帮助。