이진 데이터를 이미지로 표시하는 방법 - extjs 4

이진 데이터를 이미지로 표시하는 방법 - extjs 4

유효한 바이너리를 다음에 나타냅니다.JPEG 이미지
http://pastebin.ca/raw/2314500

Python을 사용하여 이 바이너리 데이터를 이미지에 저장하려고 했습니다.

이 데이터를 표시 가능한 것으로 변환하려면 어떻게 해야 합니까?확장자가 4인 JPEG 이미지?

이거 해봤는데 안 되네.

data:image/jpeg;base64,+ binary data

Base64에서 변환해야 합니다.

JS에는 btoa() 함수가 있습니다.

예를 들어 다음과 같습니다.

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

하지만 페이스트빈에 있는 당신의 바이너리 데이터는 유효하지 않다고 생각합니다.- jpeg 데이터는 'ffd9'로 끝나야 합니다.

업데이트:

간단한 16진수 변환기에서 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(" ")));
}

사용방법:

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

jsfiddle의 16진수 데이터에 대한 작업 예 참조

데이터 URI 형식은 다음과 같습니다.

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

따라서 "data:image/jpeg;" 문자열에만 데이터를 추가하면 됩니다.

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

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

ExtJs 에서는, 다음과 같이 할 수 있습니다.

xtype: '이미지'

이미지를 렌더링합니다.

다음은 extj를 사용한 바이너리 데이터의 렌더링을 보여 주는 바이올린입니다.

atob --> asciii를 바이너리로 변환합니다.

btoa -- >는 바이너리를 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/filename&filename/28h0

프런트 엔드 JavaScript/HTML에서는 바이너리 파일을 이미지로 로드할 수 있습니다.base64로 변환할 필요는 없습니다.

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

my-image는 이진 이미지 파일입니다.이 정도면 잘 장착될 겁니다.

언급URL : https://stackoverflow.com/questions/14915058/how-to-display-binary-data-as-image-extjs-4