2012-02-25 21 views
5

誰でもこのhttp://www.xarg.org/project/jquery-webcam-plugin/を入手して、aps.net mvc 3で動作させてもらえますか? WebImageクラスやBitmapImageを使用してイメージをデコードできないようです。asp.net mvc 3でjquery webcam plugin 3

私はSilverlightでこれを行うことに飽き飽きしていますが、画像をアップロードする方法は本当に分かりません。私はイメージを保存する必要はありません、私はちょうどそれを処理したい、私は本当に何を探しているのは、Webアプリケーションを介してバーコードを読み取ることです。

SilverlightまたはFlashからMVCアプリケーションに画像をアップロードするための良いガイドが見つからないようです。

ありがとうございます。

+0

写真を撮ってサーバーにアップロードしてバーコードを読み取るこのWebアプリケーションの作成に成功しましたか?私はまったく同じことをやろうとしているし、問題を抱えている。 –

+0

さて、銀色を使っていくつかの限定された成功を収めた。イメージを読むことができますが、実際のバーコードを読んでいるうちに、おそらくより良いウェブカメラが必要です。 – nagates

+0

しかし、AndroidとIOSではsilverlightは動作しません!だからあなたのWebアプリケーションは、AndroidやIOSデバイス用ではありませんか? –

答えて

7

documentationには多くの例があります。必要なのは、読んで試してみることだけです。だからここ

は、あなたのIndex.cshtmlビューは、AJAX要求を使用してサーバーに送信されますPNG画像にウェブカメラからの生の画像データをエンコードするために、ブラウザのHTML5のcanvas要素を使用して次のようになります方法は次のとおりです。

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

素敵な答えとコード構造、私はこれを実際のサンプルコードよりも簡単に見つけました。 URI文字列が長すぎるが、ラップされていないAJAX呼び出しを使用して他の誰かが問題を抱えている場合、データを戻す際に問題があったのですか? $ .ajax({ dataType: "json"、 type : 'POST'、 url: "あなたの関数の場所"、 データ:{image:canvas.toDataURL( "image/png")}、 成功:関数(応答){} }); –

+0

私はコードが含まれていますが、モバイルデバイスでテストすると何も起こりません。モバイルデバイスでもカメラの使用を要求せず、app_dataフォルダに成功メッセージも何も表示されません。 –

2

あなたはwww.scriptcam.comを試してみるかもしれない、このjQueryプラグインで利用可能なドキュメントがあります。