从作为blob的图像中获取url数据

Getting urldata from an image as a blob

本文关键字:获取 url 数据 图像 blob      更新时间:2023-09-26

所以这就是我想做的:

我有一个图像blob,我需要转换为图像数据url。

所以这是我的问题:

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

返回一个'undefined'。

我的问题是

我如何从该文件中获取数据url。我对javascript的了解非常有限,关于html5的东西也不多。

我自己弄清楚了,我得到未定义的原因似乎是因为当你调用reader.readAsDataURL(blob)时图像没有加载。我修改了:

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

您只需要对数据进行Base64编码并像这样显示:

<img src="data:image/png;base64,[encoded data]">

http://en.wikipedia.org/wiki/Data_URI_scheme HTML