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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15030906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 23:13:06  来源:igfitidea点击:

How to replace the deprecated BlobBuilder with the new Blob constructor?

javascriptblobs

提问by shayward

Since Blobbuilder is deprecated and I have recently decided to use a new facial recognition API I am having a hard time switching over to just "blob".

由于 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);
}

I tried switching it over to just:

我尝试将其切换为:

        // 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);
}

But i keep getting Uncaught TypeError: Object #<URL> has no method 'getBlob'in the console. Not sure what I am missing. If i try to use bb.append(ab);I get Uncaught TypeError: Object #<Blob> has no method 'append'in the console.

但我一直Uncaught TypeError: Object #<URL> has no method 'getBlob'在控制台。不知道我错过了什么。如果我尝试使用,bb.append(ab);我会Uncaught TypeError: Object #<Blob> has no method 'append'进入控制台。

回答by Rob W

Switching from BlobBuilderto Blobis quite straightforward. Try the following backwards-compatible code (the stuff in the catchblock is your original code):

BlobBuilderto切换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);
    }
}

回答by casey

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);
      };
    }        
  };
}());

Include this before you are going to use Blobs and you'll be able to use Blob constructors in browsers that only support the deprecated BlobBuilder.

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