图片怎么转成blob

将图片转换为Blob（二进制大对象）在Web开发中是一个常见的操作，特别是在处理文件上传或使用canvas API时。Blob对象是表示不可变数据的抽象，可以表示任何形式的数据，包括图像、音频和视频。以下是一个简单的步骤来实现图片转Blob：

1. 获取图片：首先，你可以通过HTML `input`元素的`file`属性获取用户选择的图片文件，例如：

<input type="file" id="imageFile" onchange="handleImageUpload()"/>

2. JavaScript处理：在JavaScript中，你可以使用FileReader API读取图片文件：

function handleImageUpload() {
  const fileInput = document.getElementById('imageFile');
  const file = fileInput.files;
  const reader = new FileReader();

  reader.onload = function(event) {
    const blob = event.target.result; // 图片已转换为Blob对象
    // 使用blob对象进行后续操作，如上传或处理
  };

  reader.readAsDataURL(file); // 读取为Data URL格式
}

在这个例子中，`readAsDataURL`会将图片转换为一个Base64编码的字符串，然后在回调函数中的`event.target.result`就是Blob对象。