Bir Blob görüntülemek için JavaScript kullanma

96

Veritabanından bir Blob görüntüsü alıyorum ve bu görüntüyü JavaScript kullanarak görüntüleyebilmek istiyorum. Aşağıdaki kod, sayfada bozuk bir görüntü simgesi oluşturur:

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

İşte blob dahil gerekli tüm kodu içeren bir jsFiddle . Tamamlanan kod, bir resmi düzgün şekilde göstermelidir.

— GAgnew
kaynak

Blobun biçimi nedir? Bu bir formatta (jpeg, png, gif vb.) Bir resim mi yoksa sadece RGB bayt mı?

— bjornd

5

Bunun document.createElement('img');yerine olmamalıdocument.createElement('image');?

— Pablo Lozano

122

BLOB nesnesini doğrudan XMLHttpRequest'ten de alabilirsiniz. ResponseType'ın blob olarak ayarlanması hile yapar. İşte kodum:

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

Ve yanıt işlevi şuna benzer:

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

HTML'de boş bir resim öğesi yapmamız gerekiyor:

<img id="image"/>

— AdamZ
kaynak

23

Önemli satır, urlCreator.createObjectURL(blob)bir image src'ye atanabilen bir imageUrl döndüren satırdır.

— Agent47DarkSoul

7

Oluşturulan URL'yi arayarak bitirdikten sonra iptal etmeyi unutmayın; revokeObjectURL

— Ralpharoo

Ben OP'ın görüntü alanının çeşit olduğunu farz ediyorum içinde bir db, yani OP alamıyorum doğrudan . Bunu yapabilseydi , büyük olasılıkla XHR / getirme yapmak yerine doğrudan bir img- etiketi kullanırdı; çünkü her ikisi de SOP'ye eğilimlidir.

— Christian Ulbrich

78

Bunun yerine getirmeyi kullanmak istiyorsanız:

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

Kaynak:

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

— Ogglas
kaynak

Bu, görüntü base64 olarak kodlandıkça base64'ü otomatik olarak dönüştürür mü?

— P Satish Patro

2

Seni seviyorum .. Bunu bulana kadar 4 saatimi çözmeye çalıştım.

— tinyCoder

Ne olurif (typeof URL !== "function") {}

— zanderwar

20

Ham verileri almak için dizenizi bir Uint8Array'e dönüştürebilirsiniz . Sonra bu veriler için bir Blob oluşturun ve Blob'u img.src'ye ilettiğiniz bir URL'ye dönüştürmek için URL.createObjectURL (blob) ' a iletin .

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

Tam örneği şu adreste deneyebilirsiniz: http://jsfiddle.net/nj82y73d/

— nkron
kaynak

14

Örneğinizde yapmalısınız createElement('img').

Bağlantınızda base64blob != Base64.encode(blob).

Verileriniz geçerli olduğu sürece çalışır http://jsfiddle.net/SXFwP/ (BMP resmim olmadığı için PNG kullanmak zorunda kaldım).

— Nachito
kaynak

İmg üzerinde iyi bir nokta. 'İmg'nin bir html görüntü öğesi olduğuna dikkat etmelisiniz, burada' görüntü ', görüntü türünün bir html giriş elemanıdır, ancak bu durumda bir fark yaratmamıştır. Ben görüntü verileri varsayarak yaşıyorum olduğunu bir 3. parti kaynağından geliyor gibi geçerli. Bunu test etmeyi bir şekilde biliyor musun? Veya yüklenen görüntüden blob veren kolay bir site mi?

— BMP'yi

Kemanınızdaki "damla" aslında bir Blob değildir. Base64 olarak kodlanmış bir dize kullandınız.

— elliotwesoff

5

Sanırım resminizin satır içi kodunda bir hata var. Bunu dene :

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

Snippet'i genişlet

Yararlı bağlantı: http://dean.edwards.name/my/base64-ie.html

— marius_neo
kaynak

3

Sorun, base64encoded edilmeden önce ikiliye dönüştürülmesi gereken onaltılık veriye sahip olmamdı.

PHP'de:

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

— GAgnew
kaynak

0

Kemanınızda, blobunuz bir damla değil, onaltılık verilerin bir dize temsilidir. Bunu bir blob üzerinde deneyin ve bitirdiniz

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 size hazır bir base64 kodlu görüntü sağlar image element () source (src)

— Bruno
kaynak