如何使用js的ReadableStream读取图片数据 请写一个完整的例子

以下是一个完整的例子，演示如何使用JavaScript的ReadableStream读取图片数据：

// 创建一个图片读取器
const imageReader = new FileReader();

// 创建一个可读流
const stream = new ReadableStream({
  start(controller) {
    fetch('path/to/image.jpg') // 替换为实际的图片路径
      .then(response => response.blob())
      .then(blob => {
        const reader = blob.stream().getReader();

        function read() {
          reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }

            // 将读取到的数据传递给图片读取器
            imageReader.readAsDataURL(value);

            // 继续读取
            read();
          });
        }

        read();
      });
  }
});

// 监听图片读取器的加载完成事件
imageReader.addEventListener('load', () => {
  const imageDataUrl = imageReader.result;
  console.log(imageDataUrl); // 输出图片的数据URL
});

// 启动读取流
stream.getReader().read();

请将 path/to/image.jpg 替换为实际的图片路径。这个例子中，我们首先使用fetch函数获取图片的Blob对象，然后将其转换为可读流。然后，我们使用getReader方法获取一个读取器，并在读取到数据时将其传递给图片读取器。最后，我们监听图片读取器的load事件，在图片加载完成后获取图片的数据URL