Question

我有一些关于fileinputjs的问题。图片＆＃39; src是blob.But我想使用图像＆＃39; 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的网址。
FileReader无法从此字符串执行任何操作。（或者至少不是你想要的）。
在FileReader的onload回调中，如果结果等于未定义的变量dataURI，则只需检查。那不会做任何事情。
您正在尝试console.log readAsDataURL对undefined的调用，因为此方法是异步的（您必须在回调中调用console.log）。

但是，因为我猜你所拥有的是object 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>元素会有另一种解决方案，但除非你真的需要它，否则我会把它留给另一个答案。

html图像blob到base64

1 个答案: