HTML图像Blob转Base64

Question

我遇到了一些关于fileinputjs的问题。图片的src是blob类型的。但我想使用这些图片的src来做一些事情。所以我使用readAsDataURL方法获取base64编码。但是出现了一些问题。

<script type="text/javascript">
     $("#last").click(function(){
       var blob=document.querySelector(".file-preview-image").src;
       var reader = new FileReader(); //通过 FileReader 读取blob类型
   reader.onload = function(){
    this.result === dataURI; //base64编码
    }
    console.log(reader.readAsDataURL(blob));
})
     </script>

其中有一个错误是Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'。

- yuan

Answer 1

这里存在很多误解：

• 你的变量blob不是一个Blob，而是一个字符串，即.file-preview-image的URL。FileReader无法使用这个字符串（或者至少不能按照你想要的方式使用）。
• 在FileReader的onload回调函数中，你只是检查结果是否等于未定义的变量dataURI。这样做没有任何效果。
• 你试图对readAsDataURL的调用进行console.log操作，但由于该方法是异步的（必须在回调函数中调用console.log），因此它将返回undefined。

但我猜你拥有的是一个对象URL（blob://），那么你的解决方案要么是获取真正的Blob对象并将其传递给FileReader，要么就在画布上绘制此图像，然后调用其toDataURL方法获取base64编码版本。

如果你能获取到Blob对象：

var dataURI;

var reader = new FileReader();

reader.onload = function(){
  // here you'll call what to do with the base64 string result
  dataURI = this.result;
  console.log(dataURI);
  };

reader.readAsDataURL(blob);

否则：

var dataURI;

var img = document.querySelector(".file-preview-image");

var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0,0);
dataURI = canvas.toDataURL();

但请注意，对于后一种情况，您需要等待图像加载完成后才能将其绘制在画布上。
此外，默认情况下，它会将您的图像转换为png版本。如果原始图像为JPEG格式，则可以将image/jpeg作为toDataURL('image/jpeg')的第一个参数传递。
如果图像是svg，则还有另一种解决方案，使用<object>元素，但除非您确实需要它，否则我会为其他答案留下它。

- Kaiido

---

看起来我需要你的帮助。看一下这个链接：https://stackoverflow.com/questions/46192069/how-can-i-solve-uncaught-referenceerror-blob-is-not-defined - moses toh