Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换

在 HTML 中，可以通过使用 `<canvas>` 元素将 Blob 转换为图片。具体步骤如下：

1. 创建一个 canvas 元素：

<canvas id="canvas"></canvas>

2. 获取 canvas 元素的上下文对象：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

3. 创建一个 Image 对象：

var img = new Image();

4. 创建一个 URL 对象，将 Blob 对象转换为 URL：

var url = URL.createObjectURL(blob);

5. 将 URL 赋值给 Image 对象的 src 属性：

img.src = url;

6. 在 Image 对象加载完成后，将图片绘制到 canvas 中：

img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

7. 最后，可以将 canvas 转换为 DataURL，或者使用 canvas.toBlob() 方法将 canvas 转换为 Blob。

var dataURL = canvas.toDataURL();
canvas.toBlob(function(blob) {
  // 处理 Blob 对象
});

注意：使用完 URL 对象后，应该及时释放资源。可以通过调用 URL.revokeObjectURL() 方法来释放 URL 对象占用的资源。

URL.revokeObjectURL(url);