html图像blob到base64 [英] html image blob to base64

问题描述

我有一些关于fileinputjs的问题。图像的src是blob.But我想使用images'src来做某事。所以我使用readAsDataURL来获取base64。但是它有任何问题。

I've got some problems about to fileinputjs.The images' src are blob.But i want to use images' src to do something.So i use readAsDataURL to get base64.But there are any problems about it 。

<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>

然后有未捕获的TypeError：无法在'FileReader上执行'readAsDataURL' '：参数1不是'Blob'类型。

推荐答案

这里有很多误解。

• 你的变量 blob 不是 Blob ，但是一个字符串， .file-preview-image 。

FileReader无法对此字符串执行任何操作。 （或者至少不是你想要的）。


• onload 回调.mozilla.org / zh-CN / docs / Web / API / FileReaderrel =noreferrer> FileReader ，如果结果等于未定义的变量，您只需检查 dataURI 。那不会做任何事情。


• 您正在尝试 console.log 调用 readAsDataURL 这将是是 undefined 因为这个方法是异步的（你必须在回调中调用 console.log ）。

• your variable blob is not a Blob, but a string, the url of .file-preview-image.
  FileReader can't do anything from this string. (Or at least not what you want).
• in the onload callback of the FileReader, you are just checking if the result is equal to an undefined variable dataURI. That won't do anything.
• you are trying to console.log the call to readAsDataURL which will be undefined since this method is asynchronous (you have to call console.log in the callback).

但是因为我猜你所拥有的是 object url （ blob：// ），那么你的解决方案要么是获取真正的Blob对象并将其传递给 FileReader ，或者在画布上绘制此图像，然后调用其 toDataURL 获取base64编码版本的方法。

But since I guess that what you have is an object url (blob://), then your solution is either to get the real Blob object and pass it to a FileReader, or to draw this image on a canvas, and then call its toDataURL method to get a base64 encoded version.

如果你能得到blob：

If you can get the 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版本。你也可以传递 image / jpeg 作为的第一个参数toDataURL（'image / jpeg'）如果原始图像是$ JPEG格式。

如果图像是svg，那么使用< object> 元素会有另一种解决方案，但是你真的需要它，我会把它留给其他答案。

But note that for the later, you'll have to wait that your image actually has loaded before being able to draw it on the canvas.
Also, by default, it will convert your image to a png version. You can also pass image/jpegas the first parameter of toDataURL('image/jpeg') if the original image is in JPEG format.
If the image is an svg, then there would be an other solution using the <object> element, but except if you really need it, I'll leave it for an other answer.

这篇关于html图像blob到base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！