JavaScript를 사용하여 Blob 표시

데이터베이스에서 Blob 이미지를 검색 중이며 JavaScript를 사용하여 해당 이미지를보고 싶습니다. 다음 코드는 페이지에 깨진 이미지 아이콘을 생성합니다.

var image = document.createElement('image');
    image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
    document.body.appendChild(image);

다음은 blob을 포함하여 필요한 모든 코드를 포함 하는 jsFiddle 입니다. 완성 된 코드는 이미지를 제대로 표시해야합니다.

XMLHttpRequest에서 직접 BLOB 객체를 가져올 수도 있습니다. responseType을 blob으로 설정하면 트릭이됩니다. 내 코드는 다음과 같습니다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();

그리고 응답 함수는 다음과 같습니다.

function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   document.querySelector("#image").src = imageUrl;
}

HTML에서 빈 이미지 요소를 만들기 만하면됩니다.

<img id="image"/>

대신 가져 오기를 사용하려는 경우 :

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

출처:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

문자열을 Uint8Array 로 변환하여 원시 데이터를 가져올 수 있습니다. 그런 다음 해당 데이터에 대한 Blob 을 만들고 URL.createObjectURL (blob) 에 전달 하여 Blob을 img.src에 전달하는 URL로 변환합니다 .

var data = '424D5E070000000000003E00000028000000EF...';

// Convert the string to bytes
var bytes = new Uint8Array(data.length / 2);

for (var i = 0; i < data.length; i += 2) {
    bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
}

// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/bmp'});

// Use createObjectURL to make a URL for the blob
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);

http://jsfiddle.net/nj82y73d/ 에서 전체 예제를 시도 할 수 있습니다.

귀하의 예에서는 createElement('img').

링크에서 base64blob != Base64.encode(blob).

데이터가 유효한 한 http://jsfiddle.net/SXFwP/ (BMP 이미지가 없어서 PNG를 사용해야했습니다).

이미지의 인라인 코드에 오류가있는 것 같습니다. 이 시도 :

var image = document.createElement('img');
    
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
    
image.width=100;
image.height=100;
image.alt="here should be some image";
    
document.body.appendChild(image);

유용한 링크 : http://dean.edwards.name/my/base64-ie.html

문제는 base64로 인코딩되기 전에 바이너리로 변환해야하는 16 진수 데이터가 있다는 것입니다.

PHP에서 :

base64_encode(pack("H*", $subvalue))

바이올린에서 Blob은 Blob이 아니라 16 진수 데이터의 문자열 표현입니다. 얼룩에 이것을 시도하고 완료

var image = document.createElement('img');
let reader=new FileReader()
reader.addEventListener('loadend',()=>{
  let contents=reader.result
  image.src = contents
  document.body.appendChild(image);
})
if(blob instanceof Blob) reader.readAsDataURL(blob)

readAsDataURL은 이미지 요소 () 소스 (src)를 위해 준비된 base64 인코딩 이미지를 제공합니다.