到base64

Question

我有一些关于fileinputjs.The图片的src是blob.But的问题，我想用图片的src来做something.So，我用readAsDataURL来获得some 64，但是有任何的问题。

<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不是水滴，而是字符串，即.file-preview-image的url。 FileReader不能用这个字符串做任何事情。(或者至少不是你想要的)。
• 在onload回调的FileReader中，您只是在检查是否等于未定义的变量dataURI。那什么也做不了。
• 您正在尝试console.log对readAsDataURL的调用，这将是undefined，因为该方法是异步的(必须在回调中调用console.log )。

但是，由于我猜您拥有的是一个对象url (blob://)，那么您的解决方案要么是获取真正的Blob对象并将其传递给一个FileReader，要么在画布上绘制这个图像，然后调用它的toDataURL方法来获得base64编码版本。

如果你能得到水珠：

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>元素会有另一个解决方案，但是除非您真的需要它，否则我将把它留给另一个答案。