1

我在 MVC4 页面中使用 jquery 网络摄像头插件。插件在这里：http ://www.xarg.org/project/jquery-webcam-plugin/ 。

1.在 Chrome 和 IE 中正常工作。“实时相机”标签下显示的图像显示实时相机结果。在 Firefox 中不显示。

在此处输入图像描述

  1. 下图是 Firefox.Live 相机结果仅显示。捕获的图像已成功保存在我的图像文件夹中。

在此处输入图像描述

这是我的 .cshtml 页面代码

<div class="modal-dialog" style="width: 560px;">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" tabindex="-1">
            <img src="~/Content/images/btn_close.png" alt=""></button>
        <h4 class="modal-title" id="myModalLabel">Capture Image</h4>
    </div>
    <div class="padLeftRight15">
        <div id="lblSKLCreateErrorMessage" class="alert alert-danger" style="display: none"></div>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" role="form" id="Profile-CaptureImage-form">
            <table border="0">
                <tr>
                    <td align="center">
                        <u>Live Camera</u>
                    </td>
                    <td></td>
                    <td align="center">
                        <u>Captured Picture</u>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="webcam">
                        </div>
                    </td>
                    <td>&nbsp;
                    </td>
                    <td>
                        <img id="imgCapture" style="visibility: hidden" width="250" height="200" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="btnCapture" value="Capture" onclick="Capture();" />

                    </td>
                    <td></td>
                    <td>
                        <input type="button" id="btnSave" value="Save Image" style="visibility: hidden" data-dismiss="modal" onclick="SaveImage();" />

                    </td>
                </tr>
            </table>
            <br />

            <br />
            <span id="camStatus"></span>
        </form>
    </div>
</div>


$(document).ready(function () {
    LoadImage();

});
function Capture() {
    webcam.capture();
    return false;
}


function LoadImage() {
    jQuery("#webcam").webcam({
        width: 250,
        height: 240,
        mode: "save",
        swffile: "@Url.Content("~/Scripts/Webcam_Plugin/jscam.swf")",
        debug: function (type, status) {
            $('#camStatus').append(type + ": " + status + '<br /><br />');
        },
        onSave: function (data) {
            $.ajax({
                type: "POST",
                url: "@(Url.Action("GetCapturedImage", "Registration", new { ProfileCode = Model.ProfileCode }))",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $('#btnSave').css("visibility", "visible");
                    $('#imgCapture').css("visibility", "visible");
                    $('#imgCapture').attr("src", r + "?ts=" + Date.now());
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        },
        onCapture: function () {
            webcam.save("@(Url.Action("CaptureImage", "Registration", new { ProfileCode = Model.ProfileCode }))");
        }
    });
}

function SaveImage() {
    $('#btnUploadProfilePhoto').val("");
    $('#preview').attr("src", '@(RMSApp.Common.ProjectConfiguration.ProfileImagePath + Model.ProfileCode + ".png?ts=123")' + Date.now());
    $('#hdnImagePath').val('@(Model.ProfileCode + ".png")');       
    $("#CaptureImageModel").html('');
}

这是控制器的代码

    public ActionResult CaptureImage(string ProfileCode)
    {
        Profile obj = new Profile();
        obj.ProfileCode = ProfileCode;

        if (Request.InputStream.Length > 0)
        {
            using (StreamReader reader = new StreamReader(Request.InputStream))
            {
                string hexString = Server.UrlEncode(reader.ReadToEnd());
                string imageName = ProfileCode.Trim();
                //string imageName = FirstName.Trim() + "_" + (string.IsNullOrEmpty(MiddleName) ? "" : MiddleName.Trim().Substring(0, 1) + "_") + (string.IsNullOrEmpty(LastName) ? "" : LastName.Trim());

                string imagePath = string.Format("~/Documents/ProfileImages/{0}.png", imageName);
                string directoryName = Server.MapPath("~/" + ProjectConfiguration.ProfileImageFolder);

                if (!Directory.Exists(directoryName))
                    Directory.CreateDirectory(directoryName);

                if (!string.IsNullOrEmpty(imagePath))
                {
                    string existingImage = Path.Combine(directoryName, imagePath);
                    if (System.IO.File.Exists(existingImage))
                        System.IO.File.Delete(existingImage);

                    System.IO.File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
                }
            }
        }
       return PartialView("CaptureImage",obj);

    }

    private static byte[] ConvertHexToBytes(string hex)
    {
        byte[] bytes = new byte[hex.Length / 2];

        for (int i = 0; i < hex.Length; i += 2)
        {
            bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 16);
        }

        return bytes;
    }

 public JsonResult GetCapturedImage(string ProfileCode)
    {
        string imagePath = string.Format(System.Configuration.ConfigurationManager.AppSettings["ProfileImages"] + ProfileCode +".png");
        return Json(imagePath);
    }
4

1 回答 1

0

我得到了解决方案！

“淡入”模型类在 Firefox 浏览器中显示 WebCam 结果时产生问题。

于 2015-03-16T06:09:47.640 回答