在 HTML 中检索 MySQL 图像 Blob

Question

对于我的网络应用程序，我使用 C# WebService、JavaScript、jQuery 和 JavaScript 我将图像上传到具有这种结构的表中：

Id | FileName | ContentType | Content
 1 |Tulips.jpg| image/jpeg  | (Binary/Image)

我想在 HTML 页面中显示此信息，此时我的 HTML 显示此信息：

2 | Tulips.jpg | image/jpeg | System.Byte[]

我想显示图像而不是 System.Byte[]，我该怎么做？ 这是我所有的代码：

C#类

公共类 Imagenes { 公共图像（）{}

public Imagenes(int id, string fileName, string type, string content)
{
    Id = id;
    FileName = fileName;
    Type = type;
    Content = content;
}
   public int Id { get; set; }
   public string FileName { get; set; }
   public string Type { get; set; }
   public string Content { get; set; }       
} 

数据库类

这里没有问题只是一个Select * from。

网络方法

[WebMethod]
public string Image(int id)
{
    DataTable dt = new DataTable();
    dt = conn.consultImg("tbl_images", id);
    Imagenes img;        
    List<Imagenes> list = new List<Imagenes>();
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        img = new Imagenes();
        img.Id = Convert.ToInt32(dt.Rows[i]["Id"]);
        img.FileName = dt.Rows[i]["FileName"].ToString();
        img.Type = dt.Rows[i]["ContentType"].ToString();
        img.Content = dt.Rows[i]["Content"].ToString();
        list.Add(img);
        img = null;
    }
    JavaScriptSerializer js = new JavaScriptSerializer();
    string lines = js.Serialize(list);
    return lines;
}

还有 JavaScript 代码：

var id = $('#Id').val();

$.ajax({
    type: "POST", 
    url: "ws_MyWebService.asmx/Image", 
    data: '{"id":' + id + '}', 
    dataType: 'json',
    contentType: 'application/json',
    timeout: 60000,
    error: function (xhr) {

    },
    success: function (data) {
        var aRC = JSON.parse(data.d);
        var lines = "";
        for (var i = 0; i < aRC.length; i++) {
            var id = aRC[i].Id;
            var fname = aRC[i].FileName;
            var type = aRC[i].Type;
            var content = aRC[i].Content;

            lines += '<p>' + id + '</p>';
            lines += '<p>' + fname + '</p>';
            lines += '<p>' + type + '</p>';
            lines += '<p>' + content + '</p>';

        }
        $('#MyDiv').html(lines);    

Answer 1

您需要对原始代码进行两处更改：

网络方法

//Change this line
img.Content = dt.Rows[i]["Content"].ToString();

//Use this instead
img.Content = Convert.ToBase64String(Serialize(dt.Rows[i]["Content"]));

额外方法

public static byte[] Serialize(object obj)
{
  var binaryFormatter = new BinaryFormatter();
  var ms = new MemoryStream();
  binaryFormatter.Serialize(ms, obj);
  return ms.ToArray();
}

JavaScript

//Replace this line
lines += '<p>' + content + '</p>';

//With this one
line += '<p><img src="data:image/jpeg;base64,' + content + '" /></p>';

您可以在 Web.config 上设置 MaxJsonLength 属性：

<configuration> 
  <system.web.extensions>
   <scripting>
       <webServices>
           <jsonSerialization maxJsonLength="50000000"/>
       </webServices>
   </scripting>
  </system.web.extensions>
</configuration>

Answer 2

您可以返回图像的 base64 编码字符串表示形式。

使用Convert.ToBase64String Method。

输出图像的位置：

<img src="data:image/jpeg;base64, <!-- base64 string here -->" />