图像下载为整数的 JSON 数组，但我想通过变成 byte[] 来呈现此图像答案

【问题标题】：image downloads as JSON array of ints but i want to render this image by turning into a byte[]图像下载为整数的 JSON 数组，但我想通过变成 byte[] 来呈现此图像
【发布时间】：2013-11-10 12:10:27
【问题描述】：

我有一个 web 服务，它返回一个 byte[] 给客户端，以显示图像。

此图像存储在一个 json 对象中，见 fiddle：http://jsfiddle.net/FuGN8/

在我做了以下简单的一行之后，将数字数组分配给 result：

result = result["d"];

这是通过 AJAX 调用获取的，所以我想从这些数据中渲染图像。

当然，做类似的事情：

$("img#mytag").attr("src", result);

不会做我想做的。

是否有一个 javascript 命令可以执行我想要的操作？

我更改为执行的服务器端代码：

WebClient wsb = new WebClient();
string url = "...";
byte[] resp = wsb.DownloadData(url);
UTF8Encoding enc = new UTF8Encoding();
return enc.GetString(resp);

但在客户端，由于我不知道图像类型是什么，我正在尝试：

src="data:image/*;base64,"+RET_VAL

它什么也没做。在类似的说明中，我也尝试过：

src="data:image;base64,"+RET_VAL

由于上面是做UTF8编码的，所以我还加了如下：

src:"data:image;base64,"+window.btoa(unescape(encodeURIComponent( RET_VAL )))

【问题讨论】：

你可以控制这个网络服务代码吗？
是的，虽然我正在转发做类似的事情：WebClient wsb = new WebClient(); wsb.Headers.Add("授权", token);返回 wsb.DownloadData([url]);返回一个字节[]给客户端
如果您将字节数组转换为 base64 字符串，您可以使用@Ramón 提到的数据 URI 方案。
rgr，让我看看我能做什么快点，我会更新。

标签： javascript jquery image

【解决方案1】：

您没有在图像中使用 Base64 编码。请改用Convert.ToBase64String 方法。您还可以在 JSON 响应中发送图像类型，以便将其应用于 src 属性。我可以让它与这段代码一起工作：

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string SendImage()
{
    var path = @"C:\teste.png";
    byte[] bytes = File.ReadAllBytes(path);

    Image image = null;
    using (var stream = new MemoryStream(bytes))
        image = Image.FromStream(stream);

    var json = new Dictionary<string, object>();
    json.Add("type", new ImageFormatConverter().ConvertToString(image.RawFormat).ToLower());
    json.Add("contents", Convert.ToBase64String(bytes));

    return new JavaScriptSerializer().Serialize(json);
}

还有这段 JavaScript 代码：

$.ajax({
    type: 'GET',
    url: 'WebService1.asmx/SendImage',
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        var data = JSON.parse(response.d);
        $('<img />').attr('src', 'data:image/' + data.type + ';base64,' + data.contents).appendTo('body');
    }
})

当然，您必须调整它，因为您使用 WebClient 来获取您的图像。

【讨论】：

我调整了return语句。我唯一想不到的是你的data.type。我不知道会是什么类型。没有 PATH persay。 URL 没有它，我唯一能想到的是它位于 data.contents 的标题中。
看看这个问题：stackoverflow.com/questions/5209506/…
它似乎在没有“/jpg”或“/png”等的情况下渲染它。我不确定这是否只是一个 chrome 的东西，或者是什么想法
我建议你把真正的 mime 类型放在那里，以确保它可以在所有浏览器上正常运行。我编辑了代码以选择图像类型，而无需读取路径。
那是完美的答案。 :) 谢谢。

【解决方案2】：

img 元素的 src 属性需要图像位置（其 URL），而不是实际的图像字节。

要将您的数据作为 URL，您可以使用 data URI Scheme。例如，对于 .png 图像：

data:image/png;base64,<your image bytes encoded in base64>

【讨论】：

我正在尝试这个（请参阅我的编辑以了解我的尝试）。需要定义类型吗？