将图像作为blob获取urldata [英] Getting urldata from an image as a blob

问题描述

所以这就是我想要做的：

我有一个图像blob，我需要将其转换为图像数据url。 / p>

所以这是我的问题：

 <脚本> 
 document.body.onpaste = function（e）{
 var items = e.clipboardData.items; 
 for（var i = 0; i< items.length; ++ i）{
 if（items [i] .kind =='file'&& items [i] .type =='image / png'）{
 var blob = items [i] .getAsFile（）; 
 var reader = new FileReader（）; 
 document.write（reader.readAsDataURL（blob））; 
} 
} 
}; 
< / script> 
  

这会返回'undefined'。

所以我的问题是

如何从该文件中获取数据网址。
我从JavaScript获得的知识非常有限，关于html5的东西并没有多少进展。

任何和所有帮助都非常感谢。 p>

解决方案

我自己想到了，看起来我得到未定义的原因是因为调用<$时图像未加载C $ C> reader.readAsDataURL（BLOB）。我解决了这个问题：

  reader.onload = function（event）{
 document.write（event.target。结果）; 
}; 
  

So this is what i want to do:

I have an image blob and i need that converted to image data url.

So this is my problem:

<script> 
 document.body.onpaste = function(e) {
var items = e.clipboardData.items;
for (var i = 0; i < items.length; ++i) {
  if (items[i].kind == 'file' && items[i].type == 'image/png') {
    var blob = items[i].getAsFile();
    var reader = new FileReader();
    document.write(reader.readAsDataURL(blob));
  }
}
 };
</script>

This returns an 'undefined'.

So my question is

How would i get the data url from that file. My knowledge from javascript is VERY limited and there isn't very much to go on regarding html5 stuff.

Any and all help is much appreciated.

解决方案

Figured it out myself, it seems the reason I'm getting undefined is because the image isn't loaded when you call reader.readAsDataURL(blob). I fixed this with:

reader.onload = function (event) {
  document.write(event.target.result);
};

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