将图像发送到我的 C# 应用程序答案

【问题标题】：sending image to my c# application将图像发送到我的 C# 应用程序
【发布时间】：2014-07-22 04:37:10
【问题描述】：

我编写了一个代码，使用 html5 中的 getusermedia 在 javascript 中获取相机源。现在我想要的是将该图像发送到我的 c# api。我已经这是一个与此相关的问题，Sending base64 string to c# server 但没有运气。所以我只是想问一下将图像从html5和javascript发送到我的c#服务器的另一种方式是什么。

【问题讨论】：

Base64 编码应该可以工作。请参阅我对您其他问题的回复。

标签： c# javascript html

【解决方案1】：

在Ode To Code 上找到了一篇关于此的有趣文章。它展示了如何编写 JavaScript 和 C# 代码来处理将从 HTML5 video 元素（来自 previous blog post）捕获的图像内容发布到 C# ASP.NET 服务器。他的代码并不难理解。我会做一些不同的正则表达式，但它应该适合你。

您可以“捕获”video 对象的当前内容，方法是将其绘制为 HTML canvas，然后将画布的内容转换为您可以发布到 C# 应用程序的 data: URI。

有趣的部分是将 data: URI 转换回图像，Ode To Code 文章向您展示了如何执行此操作。之后你用它做什么取决于你。 O2C 代码将其保存到磁盘，但您可以通过 MemoryStream 运行它并使用 System.Drawing.Image.FromStream 或类似方法将其加载到内存中。

【讨论】：

感谢科里。这就是我目前所做的。我的问题是，如果我尝试将 base64 字符串发送到服务器，我会收到错误消息。 stackoverflow.com/questions/23950526/…
您遇到的 CORS 错误与跨站点内容有关。您是否尝试将捕获的框架发布到与托管页面的网站不同的网站？
我正在尝试将捕获的帧发布到另一台计算机。实际上，仅当我尝试发送很长的 base64 字符串时才会出现问题。但是当我尝试发送一个短字符串时，一切都会正常。
希望我对您其他问题的回答会有所帮助。确保您使用 Fiddler 或类似工具来监控实际发生的情况。

【解决方案2】：

第二个答案，结合CORS问题，本地测试。

经过测试的 C# 代码（属性和ApiController）：

[AttributeUsage(AttributeTargets.Method)]
public class AllowReferrerAttribute : ActionFilterAttribute
{
    /// <summary>Update headers with CORS 'Access-Control-Allow-Origin' as required</summary>
    /// <param name="actionContext">Context of action to work with</param>
    public override void OnActionExecuting(HttpActionContext actionContext)
    {
        var ctx = (System.Web.HttpContextWrapper)actionContext.Request.Properties["MS_HttpContext"];
        var referrer = ctx.Request.UrlReferrer;

        if (referrer != null)
        {
            string refhost = referrer.Host;
            string thishost = ctx.Request.Url.Host;
            if (refhost != thishost)
                ctx.Response.AddHeader("Access-Control-Allow-Origin", string.Format("{0}://{1}", referrer.Scheme, referrer.Authority));
        }
        base.OnActionExecuting(actionContext);
    }
}

public class TestController : ApiController
{
    [AllowReferrer]
    public void Post([FromBody]string value)
    {
        if (value == null)
            throw new HttpResponseException(HttpStatusCode.BadRequest);
        if (value.Length > 100000)
            throw new HttpResponseException(HttpStatusCode.Forbidden);
    }
}

要调用的 JavaScript 代码：

function imgToBase64(img)
{
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL('image/jpeg');
    $(canvas).remove();
    return dataURL;
}

$.ajax({ url: 'http://localhost:63905/api/Test', type: 'POST', data: "=" + imgToBase64($('img')[0]), crossDomain: true })

为了测试，我将上面的代码复制到浏览器的控制台中，并加载了一个外部页面（在我的一个服务器上），页面上的第一个图像是一个不错的大图像。数据按value 参数中的预期到达，并返回 403 错误，因为它的大小超过 100,000 个字节。

诀窍是：

您的 Post 处理程序中必须有一个 [FromBody] 参数。
传递给$.ajax 调用的数据必须是开头带有= 字符的字符串。这就是 ApiController 和 [FromBody] 的工作方式。 = 字符将被删除。

AllowReferrer 属性将阻止您的 JavaScript 代码在您尝试向其他站点执行 AJAX POST 时出错，但仅此而已。它只是阻止你向 JavaScript 报告你对它发布的数据做了什么。 POST 通常仍由您的控制器处理。

如果您所在的网站失败，可能是因为在提供图像时响应中出现了诸如 x-xss-protection:1; mode=block 之类的跨站点脚本标头。许多网站现在将这些标头设置为简单的 DNS 中毒攻击等的简单保护。这将导致如下错误：

SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

如果您收到该错误，则说明您遇到了 CORS 问题，您对此无能为力。如果您使用自己的代码，那么这不是问题，而是当您尝试从其他网站获取内容时，CORS 是一个问题。

不，我什至不会开始告诉你如何破解 CORS。这不是 Stack Overflow 的用途。

【讨论】：