JavaScript的URL.createObjectURL()怎么使用

前言：URL.createObjectURL() 是 JavaScript 中的一个函数，它用于生成一个blob URL，用于在浏览器中引用一个二进制数据对象。通过这个函数，我们可以将文件或数据对象转换为一个能够通过浏览器直接访问的 URL，从而实现一些操作，比如将图片显示在页面上、将音频或视频播放等。 段落一：URL.createObjectURL()的基本用法和参数 URL.createObjectURL() 函数接受一个参数，该参数可以是一个File对象、Blob对象或者MediaSource对象。这个参数指定了需要生成 URL 的数据源。这个函数返回一个字符串，这个字符串是一个唯一的blob URL。 下面是URL.createObjectURL()函数的基本用法的示例代码：

var file = new Blob(["Hello, World!"], {type: "text/plain"});
var url = URL.createObjectURL(file);

在这个例子中，我们使用Blob对象创建一个Blob实例，并将其内容设置为"Hello, World!"，类型设置为"text/plain"。然后我们将该Blob实例传递给URL.createObjectURL()函数，生成一个blob URL。生成的blob URL存储在url变量中。 段落二：使用URL.createObjectURL()展示图片 URL.createObjectURL()可以用来展示图片，下面是一个使用 blob URL 来显示图片的示例代码：

var fileInput = document.getElementById('fileInput');
var img = document.getElementById('img');

fileInput.onchange = function() {
  var file = fileInput.files[0];
  var url = URL.createObjectURL(file);
  img.src = url;
};

在这个例子中，我们首先获取了一个文件输入元素和一个图片元素。当文件输入框的值发生改变时，我们获取选择的文件，然后将其传递给URL.createObjectURL()函数生成blob URL。最后，将该blob URL赋值给图片元素的src属性，从而实现在页面上显示图片的功能。 段落三：使用URL.createObjectURL()播放音频或视频 除了展示图片，URL.createObjectURL()还能用于播放音频或视频。下面是一个使用blob URL来播放视频的示例代码：

var fileInput = document.getElementById('fileInput');
var video = document.getElementById('video');

fileInput.onchange = function() {
  var file = fileInput.files[0];
  var url = URL.createObjectURL(file);
  video.src = url;
  video.play();
};

在这个例子中，我们使用了一个文件输入元素和一个视频元素。当文件输入框的值发生改变时，我们获取选择的文件，然后将其传递给URL.createObjectURL()函数生成blob URL。最后，将该blob URL赋值给视频元素的src属性，并调用play()方法播放视频。 总结：URL.createObjectURL() 是一个很有用的函数，它可以生成一个blob URL，用于在浏览器中引用一个二进制数据对象。我们可以通过它展示图片、播放音频或视频等。使用URL.createObjectURL()的基本步骤是：首先创建一个File对象、Blob对象或者MediaSource对象，然后将其传递给URL.createObjectURL()函数生成blob URL，最后将生成的blob URL应用到需要使用的地方。同时需要注意，在使用完blob URL后，我们需要调用URL.revokeObjectURL()函数来释放占用的内存资源。在实际应用中，我们可以根据需要对这个函数进行灵活应用，实现更多有趣的功能。