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

本文关键字：应用程序 我的 图像 | 更新日期: 2023-09-27 18:06:14

我在html5中使用getusermedia编写了一段代码来获取javascript中的相机提要。现在我要把图像发送到c# api。我已经有了一个与此相关的问题，发送base64字符串到c#服务器，但没有运气。所以我想问一下，还有什么其他的方法可以从html5和javascript发送图像到我的c#服务器。

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

在Ode To Code上找到了一篇有趣的文章。它展示了如何编写JavaScript和c#代码来处理将从HTML5 video元素(来自上一篇博客文章)捕获的图像内容发布到c# ASP。网络服务器。他的代码不难理解。我会对正则表达式做一点不同，但它应该为您工作。

你可以"捕获"video对象的当前内容通过绘制它到一个HTML canvas，然后转换画布的内容到一个data: URI，你可以发布到你的c#应用程序。

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

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

测试c#代码(attribute和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字节。

技巧如下:

  1. 你必须有一个[FromBody]参数在你的Post处理程序

  2. 传递给$.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。

相关文章：