将 SQL DB Blob 图像加载到网页中

Question

我有一个数据库，其中包含用于存储 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);

Answer 1

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

请参考这个，我认为这会帮助你摆脱它，你可以在不使用 Handler 的情况下实现它。

Answer 2

如果您正在寻找将数据转换为 base64 的函数，请使用 btoa(..) 函数。它通过 window 对象全局可用。

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

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

如本例所示，atob(..) 与 btoa(..) 相反。 Here's a link 到 MDN 上的文档。

将 SQL DB Blob 图像加载到网页中

Load SQL DB Blob Image Into A Webpage

javascript

sql

jquery

base64

blob