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

Question

blob 在开头添加了空值，例如:blob:null/72438-4637-23673-34721。但是当我使用相同的作为 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://localhost url encoded

    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/