jquery 网络摄像头插件与 asp.net mvc 3

Question

有人得到这个http://www.xarg.org/project/jquery-webcam-plugin/，与 aps.net mvc 3 一起使用吗？我似乎无法使用 WebImage 类或 BitmapImage 解码图像。

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

我似乎找不到将图像从 Silverlight 或 flash 上传到我的 MVC 应用程序的良好指南。

提前致谢。

Answer 1

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

因此，您的 Index.cshtml 视图可能如下所示，使用浏览器的 HTML5 canvas 元素将来自网络摄像头的原始图像数据编码为 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>

和您的家庭控制器：

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

Answer 2

您可以尝试 www.scriptcam.com，有关于此 jquery 插件的大量文档。