C# 带有asp.net mvc 3的jquery网络摄像头插件

有没有人得到这个，与aps.net mvc 3一起工作？我似乎无法使用WebImage类或BitmapImage对图像进行解码

我已经厌倦了用Silverlight来做这件事，但我真的不确定如何上传图像。我不需要保存图像，我只想处理它，我真正想做的是通过网络应用程序读取条形码

我似乎找不到一个好的指南来将Silverlight或flash中的图像上传到我的MVC应用程序中

提前感谢。

包含许多示例。所需要的只是阅读和尝试

下面是您的

Index.cshtml

视图的外观，它使用浏览器的HTML5画布元素将来自网络摄像头的原始图像数据编码为PNG图像，并使用AJAX请求发送到服务器：

<script src="@Url.Content("~/Scripts/jquery.webcam.js")" type="text/javascript"></script>

<div id="webcam"></div>
<a href="#" id="upload">Capture image and send for processing</a>

<script type="text/javascript">
    var pos = 0, ctx = null, saveCB, image = [];
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', 320);
    canvas.setAttribute('height', 240);
    ctx = canvas.getContext('2d');
    image = ctx.getImageData(0, 0, 320, 240);

    var saveCB = function (data) {
        var col = data.split(';');
        var img = image;
        for (var i = 0; i < 320; i++) {
            var tmp = parseInt(col[i]);
            img.data[pos + 0] = (tmp >> 16) & 0xff;
            img.data[pos + 1] = (tmp >> 8) & 0xff;
            img.data[pos + 2] = tmp & 0xff;
            img.data[pos + 3] = 0xff;
            pos += 4;
        }

        if (pos >= 4 * 320 * 240) {
            ctx.putImageData(img, 0, 0);
            $.post('@Url.Action("Upload")', { type: 'data', image: canvas.toDataURL("image/png") }, function (result) {
                if (result.success) {
                    alert('The image was successfully sent to the server for processing');
                }
            });
            pos = 0;
        }
    };

    $('#webcam').webcam({
        width: 320,
        height: 240,
        mode: 'callback',
        swffile: '@Url.Content("~/scripts/jscam_canvas_only.swf")',
        onSave: saveCB,
        onCapture: function () {
            webcam.save();
        }
    });

    $('#upload').click(function () {
        webcam.capture();
        return false;
    });
</script>

---

您可以试一试，这个jquery插件上有大量的文档可用。

答案和代码结构不错，我发现这比实际的示例代码更容易理解：）。当URI字符串太长但使用非包装的ajax调用排序时，是否在将数据传回时遇到问题…$。ajax（{dataType:“json”，type:'POST'，url:“您的函数位置”，data:{image:canvas.toDataURL（“image/png”）}，success:function（response）{}）；我已经实现了代码，但在我的移动设备上进行测试时，什么都没有发生。即使移动设备也没有要求使用摄像头，而且app_数据文件夹中也没有成功消息和任何内容。有人能帮我吗？非常迫切，你是否成功创建了这个web应用程序，可以拍照并上传到服务器读取条形码？我我将要做完全相同的事情并遇到麻烦是的，我在使用silverlight时取得了一些有限的成功。我能够阅读图像，但花了很多时间阅读实际的条形码，可能需要一个更好的网络摄像头。但是silverlight在安卓和IOS上不工作！所以你的web应用程序不适用于安卓和IOS设备？我从未真正完成过这个项目，当时我还没有一个好的移动设备来测试，我打算稍后再解决这个问题。。。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Upload(string image)
    {
        image = image.Substring("data:image/png;base64,".Length);
        var buffer = Convert.FromBase64String(image);
        // TODO: I am saving the image on the hard disk but
        // you could do whatever processing you want with it
        System.IO.File.WriteAllBytes(Server.MapPath("~/app_data/capture.png"), buffer);
        return Json(new { success = true });
    }
}