在Javascript中打开一个blob

我正在使用croppie js，库返回一个blob对象

但是对于我的网站，我有两个选择，使用微软OCR的blob（它工作得很好）将文本放在图像的一部分，或者将部分本身放在图像中，因此我需要打开blob以获取URL，将其放在图像元素的src字段中

我发现这个

function write\u img（blob）
{
var reader=new FileReader（）；
reader.addEventListener（“loadend”，函数（）{
//reader.result contient le contenu du
//典型的画面形式
});
reader.readAsDataURL（blob）；
document.getElementById（“结果”）.innerHTML+=“”；
}

但它返回null，有人能帮忙吗

但它返回空值，有什么帮助吗

它返回

null

，因为

loadend

事件尚未激发

这条线

  document.getElementById("result").innerHTML += "<img src=\"" + reader.result + "\" >";

如果要显示图像，请使用。。。避免使用base64，因为编码/解码base64会占用更多内存和时间

对象url的加载速度更快，而且也是同步的

function write_img(blob) {
  var img = new Image()

  img.src = URL.createObjectURL(blob)
  img.onload = function() {
    document.getElementById('result').appendChild(img)
    // revoke the url when it's not needed anymore.
    URL.revokeObjectURL(this.src)
  }

  img.onerror = function() {
    // not an image.
  }
}

---

最好是倾听

load

而不是

loadend

——因为

loadend

是为成功和失败而激发的。这是非常有效的！我不知道readAsDataUrl是异步的，我也不太了解回拨，但谢谢！）请参阅下面的答案-请参阅我对您真正应该收听的事件的评论：pyes谢谢我正在处理：）！

function write_img(blob)
{
    var reader = new FileReader();
    reader.addEventListener("load", function() {
        document.getElementById("result").innerHTML += "<img src=\"" + reader.result + "\" >";
     });
    reader.readAsDataURL(blob);
}

function write_img(blob) {
  var img = new Image()

  img.src = URL.createObjectURL(blob)
  img.onload = function() {
    document.getElementById('result').appendChild(img)
    // revoke the url when it's not needed anymore.
    URL.revokeObjectURL(this.src)
  }

  img.onerror = function() {
    // not an image.
  }
}