从 RESTful WCF 服务返回图像答案

【问题标题】：Returning an image from a RESTful WCF service从 RESTful WCF 服务返回图像
【发布时间】：2011-12-01 10:59:33
【问题描述】：

我有这个非常简单的 DTO：

[DataContract]
public class DTO
{
    [DataMember]
    public byte[] Image {get; set; }
}

还有这个非常简单的服务：

[ServiceContract]
public interface IFooService
{
    [WebGet(
        UriTemplate = "", 
        RequestFormat = WebMessageFormat.Json, 
        ResponseFormat = WebMessageFormat.Json)]
    List<DTO> GetDTOs();
}

在我的 global.asax 中，我有：

RouteTable.Routes.Add(new ServiceRoute("foo", 
    new WebServiceHostFactory(), typeof(FooService)));

现在，当我从浏览器调用它时，我得到一个 JSON 格式的字节数组。目前很好。现在，如何将字节数组转换为图像？

或者，有没有更好的方法来解决这个问题？我尝试将 byte[] 更改为 Stream，但是当我从 Firefox 调用服务时，尽管 HTTP 状态代码为 200，但响应为空。我正在使用 Firebug 和 Fiddler。

我认为这无关紧要，但由于太多信息不会伤害任何不是机器人的人，这里是 web.config：

<?xml version="1.0"?>
<configuration>
    <system.serviceModel>
        <behaviors>
            <serviceBehaviors>
                <behavior>
                    <serviceMetadata httpGetEnabled="true"/>
                    <serviceDebug includeExceptionDetailInFaults="false"/>
                </behavior>
            </serviceBehaviors>
        </behaviors>
        <serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true" />
    </system.serviceModel>
    <system.webServer>
        <modules runAllManagedModulesForAllRequests="true">
            <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        </modules>
    </system.webServer>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>
</configuration>

最终，我想问题是：如何从 WCF RESTful 服务返回位图，以便在浏览器中运行的 JavaScript 可以将其显示在屏幕上？

【问题讨论】：

我无法理解这里投票的逻辑。

标签： c# javascript wcf rest

【解决方案1】：

到目前为止还不错。现在，如何将字节数组转换为图像？

由于您已使用 javascript 标记了您的问题，我假设这是您用于使用服务的内容，并且您希望在浏览器中显示图像。如果是这种情况，您可以查看Data URI scheme，它允许您根据从服务获得的字节显示图像。

这是一个示例，您可以如何使用 jQuery 使用此类服务并显示图像：

$(function () {
    $.getJSON('/foo/', function (dtos) {
        $.each(dtos, function (index, dto) {
            var str = String.fromCharCode.apply(String, dto.Image);
            $('<img/>', {
                alt: '',
                src: 'data:image/png;base64,' + $.base64.encode(str)
            }).appendTo('body');
        });
    });
});

$.base64.encode 函数来自this plugin。

【讨论】：

正确。我正在使用 jQuery 来使用服务。
这对我从 WCF 返回的 byte[] 转移有很大帮助。诀窍确实是完全按照这里描述的那样做！ base64 信息是一个 jQuery 插件，可以在这里找到archive.plugins.jquery.com/project/base64

【解决方案2】：

使用 WCF 执行此操作的问题在于 Web 服务框架（尤其是 WCF）对结果响应做出了很多假设。当您从服务器请求图像时，HTTP 响应内容类型通常与 API 请求不同。

这就是为什么我认为这样的工作不应该使用 WCF 来实现。我刚刚回答了一个类似的问题，但使用的是 WebAPI 而不是 WCF：

ASP .Net Web API downloading images as binary

如果您只实现自定义HTTP handler，您会更开心。 API 用于结构化数据，而图像不是结构化数据——它们是二进制的。它们在 HTTP 中有自己的位置，我认为将它们与 API 分离是个好主意。

【讨论】：