带有 asp.net mvc 3 的 jquery 网络摄像头插件 [英] jquery webcam plugin with asp.net mvc 3

问题描述

有没有人得到这个http://www.xarg.org/project/jquery-webcam-plugin/，使用 aps.net mvc 3?我似乎无法使用 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 来做这件事，但我真的不确定如何上传图片.我不需要保存图像，我只想处理它，我真正想做的是通过网络应用程序读取条形码.

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 或 flash 上传到我的 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 元素将来自网络摄像头的原始图像数据编码为 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 });
    }
}

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