Question

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

Answer 1

在Ode To Code找到一篇关于此文章的有趣文章。它显示了如何编写JavaScript和C＃代码来处理从HTML5 video元素（从previous blog post）到C＃ASP.NET服务器捕获的图像的内容。他的代码并不难以理解。我的Regex有点不同，但它应该对你有用。

您可以通过将video对象的当前内容绘制到HTML canvas来“捕获”当前内容，然后将画布的内容转换为您可以发布的data: URI到你的C＃应用程序。

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

Answer 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字节。

技巧是：

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

当您尝试对其他网站执行AJAX POST时，=属性将阻止您的JavaScript代码出错，但仅此而已。它只是阻止您向JavaScript报告您对其发布的数据所做的操作。 POST通常仍由您的控制器处理。

如果您使用的网站失败，可能是因为提供图片时响应中的AllowReferrer等跨网站脚本标题。许多网站现在将这些标头设置为易于防止简单的DNS中毒攻击等等。这将导致错误：

x-xss-protection:1; mode=block

如果你收到了这个错误，那么你就会遇到一个CORS问题而且你无能为力。如果您正在使用自己的代码，那么这不是问题，当您尝试从其他网站获取CORS是一个问题的东西时。

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

将图像发送到我的c＃应用程序

2 个答案: