URL.createObjectURL 返回一个带有 null 前缀的 blob。例如：Blob:null/12415-63

Question

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

我正在使用 URL.createObjectURL 调用。我也尝试使用 webkitURL。两者都返回一个在开头附加 null 的 blob。URL 和 webkitURL 返回的 blob 值也不相同。

这是代码片段

        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://localhosturl 编码的

    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/