URL.createObjectURL returns 一个带有 null 前缀的 blob。例如：斑点：null/12415-63

Question

blob 在开头添加了空值，例如：blob:null/72438-4637-23673-34721。但是当我使用相同的作为 src 时，它显示了正确的图像。

我正在使用 URL.createObjectURL 电话。我也尝试使用 webkitURL。 return 都是一个在开头附加了 null 的 blob。 URL 和 webkitURL 编辑的 blob 值 return 也不相同。

这是代码片段

        var dataUrl = canvas.toDataURL();

        // The last piece of the data URL after the comma
        var byteString = atob(dataUrl.split(',')[1]);

        // Populate an array buffer
        var arrayBuffer = new ArrayBuffer(byteString.length);
        var uint8Array = new Uint8Array(arrayBuffer);
        for (var i = 0; i < byteString.length; i++) {
            uint8Array[i] = byteString.charCodeAt(i);
        }

        var blob = new Blob([uint8Array], { type: "image/png" });
        var blobVal = URL.createObjectURL(blob);

这里的 blobVal 有 "blob:null/1234-5678-9012- ..."

Answer 1

这就是起源，文件系统和沙盒 iframe（也许其他）的起源是 null。如果您设置本地服务器，它应该说 http%3A//localhost，即 http://localhost url 编码

    var arrayBuffer = new ArrayBuffer(100);
 var uint8Array = new Uint8Array(arrayBuffer);
 for (var i = 0; i < 100; i++) {
  uint8Array[i] = i;
 }

 var blob = new Blob([uint8Array], { type: "image/png" });
 var blobVal = URL.createObjectURL(blob);
 $('div').html(blobVal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

这个说http%3A//fiddle.jshell.net
http://jsfiddle.net/thsn3ayp/

URL.createObjectURL returns 一个带有 null 前缀的 blob。例如：斑点：null/12415-63

URL.createObjectURL returns a blob with null prepended. Eg : Blob:null/12415-63

javascript

url

null

blob