javascript - 在 Javascript 中打开一个 blob

Question

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

但对于我的网站，我有两个选择，使用微软 OCR 的 blob(效果很好)在图像的一部分中包含文本，或者使用该部分本身，所以我需要打开 blob 来获取将其放入图像元素的 src 字段中的 URL

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

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