Cách hiển thị dữ liệu nhị phân dưới dạng ảnh - extjs 4

Question

Đây là tệp nhị phân cho hình ảnh .JPEG hợp lệ.
http://pastebin.ca/raw/2314500

Tôi đã cố gắng sử dụng Python để lưu dữ liệu nhị phân này thành một hình ảnh.

Làm cách nào để chuyển đổi dữ liệu này thành hình ảnh .JPEG có thể xem với extjs 4?

Tôi đã thử cách này nhưng không hoạt động.

data:image/jpeg;base64,+ binary data 

Answer 1

Cần chuyển đổi nó trong base64.

JS có hàm btoa() cho nó.

Ví dụ:

var img = document.createElement('img'); 
img.src = 'data:image/jpeg;base64,' + btoa('your-binary-data'); 
document.body.appendChild(img); 

Nhưng tôi nghĩ rằng những dữ liệu nhị phân của bạn trong pastebin không hợp lệ - các dữ liệu jpeg phải được kết thúc vào 'ffd9'.

Cập nhật:

Cần viết hex đơn giản để chuyển đổi base64:

function hexToBase64(str) { 
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" "))); 
} 

Và sử dụng nó:

img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data'); 

Xem ví dụ làm việc với dữ liệu hex của bạn trên jsfiddle

Answer 2

Da định dạng ta URI là:

data:<headers>;<encoding>,<data>

Vì vậy, bạn chỉ cần nối thêm dữ liệu của bạn với "data: image/jpeg ;," chuỗi:

var your_binary_data = document.body.innerText.replace(/(..)/gim,'%$1'); // parse text data to URI format 

window.open('data:image/jpeg;,'+your_binary_data); 

Answer 3

Trong front-end JavaScript/HTML, bạn có thể tải tệp nhị phân dưới dạng hình ảnh, bạn không phải chuyển đổi thành base64:

<img src="http://engci.nabisco.com/artifactory/repo/folder/my-image"> 

hình ảnh của tôi là tệp hình ảnh nhị phân. Điều này sẽ tải tốt.

Answer 4

Trong ExtJs, bạn có thể sử dụng

xtype: 'image'

để vẽ lại một hình ảnh.

Dưới đây là một fiddle hiển thị kết xuất dữ liệu nhị phân với extjs.

atob -> chuyển đổi ascii để nhị phân

btoa -> chuyển đổi nhị phân để ascii

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     var srcBase64 = "data:image/jpeg;base64," + btoa(atob("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8H8hYDwAFegHS8+X7mgAAAABJRU5ErkJggg==")); 

     Ext.create("Ext.panel.Panel", { 
      title: "Test", 
      renderTo: Ext.getBody(), 
      height: 400, 
      items: [{ 
       xtype: 'image', 
       width: 100, 
       height: 100, 
       src: srcBase64 
      }] 
     }) 
    } 
}); 

https://fiddle.sencha.com/#view/editor&fiddle/28h0