javascript - 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'。

Answer 1

这里有很多误解。

• 你的变量blob不是 Blob , 而是一个字符串，.file-preview-image 的 url .
  FileReader 无法对此字符串执行任何操作。 (或者至少不是你想要的)。
• 在onload FileReader 的回调，您只是在检查结果是否等于 undefined variable dataURI .那不会做任何事情。
• 您正在尝试 console.log调用readAsDataURL这将是 undefined因为此方法是异步的(您必须在回调中调用 console.log)。

但是因为我猜你拥有的是一个 object url ( blob:// )，那么您的解决方案是获取真正的 Blob 对象并将其传递给 FileReader , 或者在 Canvas 上绘制此图像，然后调用其 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();

但请注意，对于后者，您必须等待图像实际加载后才能在 Canvas 上绘制它。
此外，默认情况下，它会将您的图像转换为 png 版本。你也可以通过 image/jpeg作为 toDataURL('image/jpeg') 的第一个参数如果原始图像是 JPEG 格式。
如果图像是 svg，那么会有使用 <object> 的其他解决方案。元素，但除非你真的需要它，否则我会把它留给其他答案。