0

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

此图像存储在 json 对象中，请参见小提琴：http: //jsfiddle.net/FuGN8/

在我执行以下简单行后，将数字数组分配给结果：

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 )))
4

2 回答 2

2

您没有在图像中使用 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');
    }
})

当然，您必须在使用 aWebClient来获取图像时对其进行调整。

于 2013-10-30T19:11:21.133 回答
1

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

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

data:image/png;base64,<your image bytes encoded in base64>
于 2013-10-30T18:15:38.080 回答