자바 스크립트에서 블롭 열기

Question

저는 croppie js로 작업 중이며 lib는 blob 객체를 반환합니다.

내 웹 사이트에는 두 가지 옵션이 있습니다. 이미지의 일부에 텍스트가 있거나 그 자체가있는 부분을 가지고 있으므로 얻을 수있는 BLOB를 열 필요가있는 Microsoft의 OCR 용 BLOB를 사용합니다 URL이 내가

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 + "\" >"; 
} 

https://developer.mozilla.org/fr/docs/Web/API/Blob에 발견 이미지 요소

의 SRC의 필드에 넣어하지만 null를 돌려, 도움을 줄 사람이 있습니까?

Answer 1

하지만 null이 반환됩니다.

이벤트가 아직 실행되지 않았으므로 null을 반환합니다.

당신이 ... 이미지를 표시이 더 많은 메모리 & 시간을 소요하기 때문에 64 기수를 방지하려면

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); 
} 

Answer 2

사용 URL.createObjectURL 내부가이 라인 base64를 인코딩/디코딩하는 방법

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