Question

我正在使用croppie js并且lib返回一个blob对象。

但是对于我的网站，我有两个选项，使用blob作为Microsoft的OCR（完美地工作）将文本放在图像的一部分或者拥有该部分本身，所以我需要打开blob获取URL以将其放在图像元素的src的字段中

我在https://developer.mozilla.org/fr/docs/Web/API/Blob

上找到了这个

function write_img(blob)
{
    var reader = new FileReader();
    reader.addEventListener("loadend", function() {
        // reader.result contient le contenu du
        // blob sous la forme d'un tableau typé
        });
    reader.readAsDataURL(blob);
    document.getElementById("result").innerHTML += "<img src=\"" + reader.result + "\" >";
}

但它返回null，是否有人能够提供帮助？

Answer 1

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

对象网址加载速度更快，也是同步

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

Answer 2

但它返回null，有什么帮助？

它返回null，因为loadend事件尚未被触发。

这一行

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

需要位于loadend事件处理程序

中

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

在Javascript中打开一个blob

2 个答案: