36

有効な .JPEG イメージのバイナリは次のとおりです。
http://pastebin.ca/raw/2314500

Python を使用して、このバイナリ データを画像に保存しようとしました。

このデータをextjs 4で表示可能な.JPEG画像に変換するにはどうすればよいですか?

これを試しましたが、うまくいきません。

data:image/jpeg;base64,+ binary data
4

4 に答える 4

70

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 進データを使用した実際の例を参照してください

于 2013-02-17T05:52:37.130 に答える
3

データ 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);
于 2014-12-01T13:49:40.203 に答える
1

ExtJsでは、使用できます

xtype: '画像'

イメージをレンダリングします。

これは、extjs を使用したバイナリ データのレンダリングを示すフィドルです。

atob -- > アスキーをバイナリに変換

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/editor&fiddle/28h0

于 2017-10-18T04:47:04.467 に答える