用摄像头拍菜单图片

public/js/camilize.js

@@ -0,0 +1,63 @@
+$.fn.camilize=function(opt){
+  opt = $.extend({
+    //todo: add more default options
+    btnClass:'',
+    btnText: 'use my camera',
+    btnStopClass:'',
+    btnStopText: 'take a picture',
+    width:640,
+    height:480,
+    mime: 'image/jpeg',
+    error:function(){}
+  },opt);
+  $(this).filter('input[type="file"]').each(function(i,e){
+    $self = $(e);
+    var cur_stream,$video = $('<video autoplay width="'+opt.width+'" height="'+opt.height+'"></video>').insertAfter($self).hide(),
+      $canvas = $('<canvas width="'+opt.width+'" height="'+opt.height+'"></canvas>').insertAfter($self).hide(),
+      $btn = $('<a href="#">'+opt.btnText+'</a>').addClass(opt.btnClass).insertAfter($self).click(function(e){
+        e.preventDefault();
+        if(!(navigator.getUserMedia||navigator.webkitGetUserMedia)){
+          return opt.error(new Error('Browser not support! '));
+        } 
+        var userMedia = (function(done, err){
+          try{
+            if (navigator.getUserMedia){
+              return navigator.getUserMedia({video: true}, done, err).bind(navigator);
+            }
+            if (navigator.webkitGetUserMedia){
+              return navigator.webkitGetUserMedia({video: true}, done, err).bind(navigator);
+            }
+          } catch(e){}
+        })(function(stream){
+          cur_stream = stream;
+          var source = stream;
+          if(window.webkitURL){
+            source = window.webkitURL.createObjectURL(source);
+          }
+          $canvas.hide();
+          $video.show()[0].src = source;
+          $btnStop.show();
+          $btn.hide();
+        }, function(err){
+          opt.error(err);
+        });
+
+      }),
+      $btnStop = $('<a href="#">'+opt.btnStopText+'</a>').addClass(opt.btnStopClass).hide().insertAfter($self).click(function(e){
+        e.preventDefault();
+        cur_stream.stop();
+        var context = $canvas[0].getContext('2d');
+        context.clearRect(0, 0);
+        context.drawImage($video[0], 0, 0, opt.width, opt.height);
+        $canvas.show();
+        $video.hide();
+        $btnStop.hide();
+        $btn.show();
+        var $old = $self;
+        $self= $('<input type="hidden"/>').attr('name',$old.attr('name')).insertAfter($old);
+        $old.remove();
+        $self.val($canvas[0].toDataURL(opt.mime));
+      });
+
+  });
+};

routes/admin.js

@@ -66,6 +66,10 @@ exports.shop_add = function (req, res) {
     };
 
     (function(cb){
+      if(req.body.picmenu){
+        shop.picmenu = new Buffer(req.body.picmenu.substring("data:image/jpeg;base64,".length), 'base64');
+        return cb()
+      }
       if(req.files.picmenu && req.files.picmenu.size){
         fs.readFile(req.files.picmenu.path, function(err, buffer){
           shop.picmenu = buffer;
@@ -137,6 +141,10 @@ exports.shop_picmenu = function (req, res) {
 exports.shop_picmenu_upload = function(req, res){
   db.shop.findOne({"_id":db.ObjectID.createFromHexString(req.params.id)}, function (err, shop) {
     (function(cb){
+      if(req.body.picmenu){
+        var buffer = new Buffer(req.body.picmenu.substring("data:image/jpeg;base64,".length), 'base64');
+        return db.shop.update({"_id":shop._id}, {'$set': { 'picmenu': buffer}}, cb);
+      }
       if(req.files.picmenu && req.files.picmenu.size){
         fs.readFile(req.files.picmenu.path, function(err, buffer){
           if(err) console.error(err);

views/admin/shop/add.ejs

@@ -40,8 +40,19 @@
       <label class="control-label" class="control-label" for="picmenu">菜单图片<br/><small>（你真是有够懒）</small></label>
 
       <div class="controls">
-        <input type="file" name="picmenu" id="picmenu">
-        <small>(亲，我只认jpg格式的图片哦)</small>
+        <input type="file" name="picmenu" id="picmenu" placeholder="(亲，我只认jpg格式的图片哦)">
+        <script type="text/javascript" src="/js/camilize.js"></script>
+        <script>
+          $('#picmenu').camilize({
+            btnClass:'btn btn-primary', 
+            btnText: '用我的摄像头把菜单照下来',
+            btnStopClass:'btn btn-success', 
+            btnStopText: '用我的摄像头把菜单照下来',
+            error:function (err) {
+              alert('少年，只有最新版本的Chrome和Opera才支持这么懒的做法啊！');
+            }
+          });
+        </script>
       </div>
     </div>
     <div class="control-group">

views/admin/shop/picmenu.ejs

@@ -8,9 +8,20 @@
   <% } %></div>
   <div class="actions">
     <form method="post" action="upload" enctype="multipart/form-data">
-      <input type="file" name="picmenu" />
+      <input type="file" name="picmenu" id="picmenu" placeholder="(亲，我只认jpg格式的图片哦)">
+        <script type="text/javascript" src="/js/camilize.js"></script>
+        <script>
+          $('#picmenu').camilize({
+            btnClass:'btn btn-primary', 
+            btnText: '用我的摄像头把菜单照下来',
+            btnStopClass:'btn btn-success', 
+            btnStopText: '用我的摄像头把菜单照下来',
+            error:function (err) {
+              alert('少年，只有最新版本的Chrome和Opera才支持这么懒的做法啊！');
+            }
+          });
+        </script>
       <button type="submit" class="btn btn-primary">更换图片菜单</button>
-      <small>(亲，我只认jpg格式的图片哦)</small>
       <% if(shop.picmenu){ %>
       <a class="btn btn-primary btn-danger" href="upload">删除图片菜单</a>
       <% } %>