html image blob to base64

html image blob to base64

本文关键字：base64 to blob image html      更新时间：2023-09-26

我在fileinputjs方面遇到了一些问题。图像的src是blob。但我想用images的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>

然后是CCD_ 1。

这里有很多误解。

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

但是，由于我猜测您拥有的是一个对象url（Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'0），那么您的解决方案要么是获得真正的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>元素的解决方案，但除非您真的需要它，否则我将把它留给其他答案。

相关文章：