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

【问题标题】：Load SQL DB Blob Image Into A Webpage将 SQL DB Blob 图像加载到网页中
【发布时间】：2016-10-29 16:58:45
【问题描述】：

我有一个带有字段的数据库来存储 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编码，但你应该真正创建一个页面来显示给定标识符的图像，而不是使用数据uris
我尝试在服务器上进行转换（代码如下），但图像被截断... Byte[] bytes = new Byte[rdr["cPhoto"].ToString().Length / 2]; for (int i = 0; i
您是在问是否有可以将某些内容转换为 base64 的 javascript 函数？这就是CONVERTME(..) 的占位符吗？如果是这样，你应该使用btoa(..) 它将一个字符串转换成base64。 atob(..) 会反过来；它将base64字符串转换为人类可读的字符串。 btoa('hello') --> "aGVsbG8=" ... atob('aGVsbG8=') --> "hello"
@wcarroll 是的。这就是我希望对话发生的地方。
见上文。 btoa(..) 有帮助吗？它可作为 window 对象上的全局变量使用。

标签： javascript jquery sql base64 blob

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：