html图像blob到base64

Question

我有一些问题要fileinputjs.The图像SRC是blob.But我想使用的图像SRC做something.So我使用readAsDataURL得到base64.But有关于它的任何问题.

<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,而是一个字符串,它的url .file-preview-image.
  FileReader无法从此字符串执行任何操作.(或者至少不是你想要的).
• 在FileReader的onload回调中,您只是检查结果是否等于未定义的变量.那不会做任何事情.dataURI
• 您试图console.log调用readAsDataURL这将是undefined因为这种方法是异步的(你要调用console.log回调).

但是,因为我想,你有什么是对象的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>元素会有另一种解决方案,但除非你真的需要它,否则我会把它留给另一个答案.