摄像头的jQuery插件与asp.net MVC 3 [英] jquery webcam plugin with asp.net mvc 3

问题描述

有没有人获得这样的<一个href=\"http://www.xarg.org/project/jquery-webcam-plugin/\">http://www.xarg.org/project/jquery-webcam-plugin/,与aps.net MVC 3工作？我似乎无法去code图像，使用WebImage类或BitmapImage的。

has anyone gotten this http://www.xarg.org/project/jquery-webcam-plugin/, to work with aps.net mvc 3? I can't seem to decode the image, using the WebImage class or BitmapImage.

我已经厌倦了Silverlight来做到这一点，但我对如何将图片上传真的不确定。我不需要保存图像，我只是想处理它，什么IM真正希望做的是通过读取Web应用程序一个酒吧，code。

I've tired to do this with Silverlight, but I'm really unsure on how to upload the image. I do not need to save the image, I just want to process it, what im really looking to do is read a bar-code via web app.

我似乎无法找到一个很好的指导，从Silverlight的或图像闪烁上传到我的MVC应用程序。

I just can't seem to find a good guide to uploading an image from Silverlight or flash to my MVC app.

先谢谢了。

推荐答案

借助文档包含许多例子。所有这一切需要的是阅读和尝试。

The documentation contains many examples. All that's needed is to read and try out.

因此​​，这里是你的 Index.cshtml 视图可能怎么看起来像使用浏览器的HTML5 canvas元素为en code中的原始图像数据从摄像头进入一个PNG图像将使用AJAX请求被发送到服务器：

So here's how your Index.cshtml view might look like using the browser's HTML5 canvas element to encode the raw image data coming from the webcam into a PNG image that will be sent to the server using an AJAX request:

<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>

和您的家庭控制器：

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 });
    }
}

这篇关于摄像头的jQuery插件与asp.net MVC 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！