javascript - WebページのSQL DB BLOBから画像をロードする - コードログ

blob jpeg 画像データを格納するフィールドを持つデータベースがあります (例: FFD8FFE00010...)。データを問題なく抽出し、バイト配列と base64 文字列に変換できます。しかし、画像が表示されると、画像の半分以下になります。変換の多くが画像を切り取っているようです.

これは私が使ってきたもののサンプルです:

$.ajax({
        url: "../queries/getContactImage.ashx",
        contentType: "application/json; charset=utf-8",
        cache: false,
        dataType: "json",
        data: {
            iID: pID
        },
        responseType: "json",
        success: function (response) {

            // Loop Through Values And Build String
            if (response.length != 0) {
                $.each(response.aaData, function (index, row) {

                    // CONVERT BLOB TO BYTE[] ARRAY
                    var buffer = [];
                    for (var i = 0; i < row.cPHOTO.length / 2 - 1; i++) {
                        var twoByte = row.cPHOTO.substring((i * 2), (i * 2) + 2);
                        buffer.push(parseInt(twoByte, 16));
                    }
                    console.log(buffer);    

                    // CONVERT TO BASE64STRING
                    var binary = '';
                    var bytes = new Uint8Array(buffer);
                    var len = bytes.byteLength;
                    for (var i = 0; i < len; i++) {
                        binary += String.fromCharCode(bytes[i]);
                    }
                    var base64String = window.btoa(binary);

                    // THIS ONLY DISPLAYS PART OF THE IMAGE ...
                    $("#lstPicture").append("<img src='data:Image/jpeg;base64," + base64String + "' class='img-responsive pic-bordered'/></img>");

                });
            }

        },
        error: function () {
            alert('Contact Image Cannot Be Retrieved.');
        },
    });

画像全体を表示するにはどうすればよいですか?問題はありますかサイズ制限?

-編集-

サーバーに変換しようとしましたが (以下のコード)、画像が途切れていました..

Byte[] bytes = new Byte[rdr["cPhoto"].ToString().Length / 2 ]; 
for (int i = 0; i < bytes.Length; i++) { 
    bytes[i] = Convert.ToByte(rdr["cPhoto"].ToString().Substring(i * 2, 2), 16); 
} 
results.cPHOTO = Convert.ToBase64String(bytes);

データを base64 に変換する関数を探している場合は、btoa(..) 関数を使用します。 window オブジェクトを通じてグローバルに利用できます。

btoa('hello')
// => "aGVsbG8="

atob('aGVsbG8=')
// => "hello"

この例が示すように、atob(..) は btoa(..) の逆を行います。 MDN のドキュメントへのリンクは次のとおりです。

http://www.aspsnippets.com/Articles/Save-and-retrieve-BLOB-images-from-MySql-Database-in-ASPNet-C-and-VBNet.aspx

これを参照してください。これはこの問題を解決するのに役立ち、Handler を使用せずに達成できると思います。