JQuery веб-камера плагин с Asp.net MVC 3 - PullRequest
Новая
       43

JQuery веб-камера плагин с Asp.net MVC 3

5 голосов
/ 26 февраля 2012

кто-нибудь получил это http://www.xarg.org/project/jquery-webcam-plugin/, для работы с aps.net mvc 3? Я не могу декодировать изображение, используя класс WebImage или BitmapImage.

Я устал делать это с Silverlight, но я действительно не уверен, как загрузить изображение. Мне не нужно сохранять изображение, я просто хочу его обработать, я действительно хочу прочитать штрих-код через веб-приложение.

Мне просто не удается найти хорошее руководство по загрузке изображения из Silverlight или flash в мое приложение MVC.

Заранее спасибо.

Ответы [ 2 ]

7 голосов
/ 26 февраля 2012

Документация содержит много примеров.Все, что нужно, это прочитать и попробовать.

Итак, вот как может выглядеть ваше 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>

и вашего контроллера Home: 

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 });
    }
}
2 голосов
/ 26 февраля 2012

Вы можете попробовать www.scriptcam.com , для этого плагина jquery доступна обширная документация.

...