使用 jQuery 将 byte[] 渲染到图像答案

【问题标题】：Render byte[] to image using jQuery使用 jQuery 将 byte[] 渲染到图像
【发布时间】：2011-07-04 09:25:27
【问题描述】：

我目前正在从 SQL Server 数据库中读取图像作为字节 []。我想将图像作为 byte[] 或真实图像传递给 jQuery 并动态加载它。

如何以及最好的方法是什么？

提前致谢。 :)

编辑：解决方案如下：

服务器端/C#： string json = JsonConvert.SerializeObject(employee);
客户端/Ajax： $('#image').attr('src', "data:image/jpg;base64,"+employee.Image);

【问题讨论】：

标签： c# jquery sql-server image

【解决方案1】：

使用正确的内容类型集从网络服务器返回 byte[]，这样您应该能够将其设置为图像标签的来源。应该是最简单的解决方案。

【讨论】：

正确的内容类型集是什么意思？仅供参考，我使用 Json.NET 将数据返回给 jQuery。那我就做？谢谢。
比如 jpeg，设置 request.contenttype ="image/jpeg"，但是如果你只是在 ajax 请求中返回 byte[]，那么你需要在浏览器中做类似的事情
谢谢。有了您和@Tesserex 的回答，我们就可以开始工作了。 :)

【解决方案2】：

如果必须这样做，可以使用以下语法将图像数据直接插入到 src 属性中：

data:image/<type>;base64,<data>

替换为图像类型（jpg、png、gif）和您的数据，以 base 64 编码。

但是，正如 decyclone 所说，最好的方法是创建一个单独的页面，该页面仅输出您的图像数据，并发送适当的内容类型标题。然后设置图片src指向那个页面。

【讨论】：

【解决方案3】：

我不认为在这里使用 jQuery 是正确的做法。这是客户端的事情。 JavaScript，具体来说。

通常，您创建一个页面，该页面使用Response.Write() 将所有这些字节写入数组，并根据图像类型将内容类型设置为 jpeg、bmp 等。

【讨论】：

【解决方案4】：

我目前正在阅读来自JSON 响应的图像。我想将此编码字符串传递到Jquery 模板上的图像控件并动态加载它，如何以及最好的方法是什么？模板如下：

<script id="ImageDiv" type="image/png">
    <div style="width:200px;height:150px;>
            <img src="${ImageView}" alt="" />
        </div>
</script>

js文件如下：

var demo = new Object();

$.each(msg.images, function (key, value) 
            {
                if (this.IsImage)
                 {
                    demo["ImageView"]="data:image/png;base64,"+this.Image;
                    $('#ImageDiv').tmpl(demo).appendTo("#Demo-Image");

                 }
            });

JSON回复如下：

msg = {"Images":[ "Description": "Image1", "Image": "encoded string of image", "IsImage": true, "MimeType": "image/png", } ]

复制图像编码字符串的空间更少。

【讨论】：