Jquery 网络摄像头图片直接到文件附件

所以我有一个表单，在这个表单中，用户可以上传一张图片。作为替代，我希望他们能够拍照并上传照片。

---

现在我想，当用户使用某种flash网络摄像头接口拍摄照片时，在用户完成表单时，该照片需要存储在某种中间存储器中

有办法解决这个问题吗？最好的解决方案是什么

我想只有两种选择

要么（a）我持有临时照片，然后在提交表单后再次接受它，要么（b）用户拍摄照片，将其下载到本地计算机上，然后他们必须选择它作为再次提交的文件

这两种解决方案都不是我真正满意的，所以我想知道是否有更好的方法来做到这一点

编辑：作为一个额外的奖励，虽然它不是真的相关，我正在制作一个Rails应用程序，带有用于文件附件的回形针。另外，我更喜欢使用jQuery

另外，只要有经验的UI web开发人员提供一般性的意见就好了。

我用过这个：在我的rails应用程序中，从网络摄像头捕获图像。您可以在此处下载此jQuery网络摄像头：

下面是一个大致完成的实现，很抱歉代码太乱：

class PicturesController < ApplicationController
  require 'base64'
    def capture
      # do something
      render :layout => "webcam"
    end

    def save_image
      image = params[:capture][:image]
      File.open("#{Rails.root}/public/path_you_want_to_image/image_name.png", 'wb') do |f|
        f.write(Base64.decode64(image))
      end
      # Or use paperclip to save image for a model instead!!
    end
end

从这里，您可以使用以下命令：使用Ajax表单提交上传

如果您有任何问题，请务必告诉我。

错误

替换

def save_image
  image = params[:canvas][:image]
  File.open("#{Rails.root}/public/path_you_want_to_image/image_name.png", 'wb') do |f|
    f.write(Base64.decode64(image))
  end
  # Or use paperclip to save image for a model instead!!
end

顺便

def save_image
  image = params[:capture][:image]
  File.open("#{Rails.root}/public/path_you_want_to_image/image_name.png", 'wb') do |f|
    f.write(Base64.decode64(image))
  end
  # Or use paperclip to save image for a model instead!!
end

及

function capture_image（）{
webcam.capture（）；
changeFilter（）；
无效（0）；
var canvas=document.getElementById（'canvas'）
var context=canvas.getContext（“2d”）；
var img=canvas.toDataURL（“image/png”）；
var item_image=img.replace（/^data:image\/（png | jpg）；base64，/，“”）；
document.getElementById（'capture_images'）。innerHTML=“”；}

到

function capture_image（）{
webcam.capture（）；
changeFilter（）；
无效（0）；
var canvas=document.getElementById（'canvas'）
var context=canvas.getContext（“2d”）；
var img=canvas.toDataURL（“image/png”）；
var item_image=img.replace（/^data:image\/（png | jpg）；base64，/，“”）；
document.getElementById（'capture_images'）。innerHTML=“”；}

在这之后，一切都很好

---

注：如果您得到：“capture_images（）不是f-n”，请将f-n名称更改为：“capture_images（）”不要忘记在onClick事件上更改名称

您可以使用HTML的

画布

将从网络摄像头拍摄的图片数据保存到

div

中，然后在用户提交表单时保存它。我差不多8到9个月前就这么做了。你想要代码实现吗？或者寻找最佳实践类型的答案？Facebook/Google已经很好地实现了这一点。可能，请查看它们。@Surya是的，请使用代码实现将非常有用。@Surya，如果可能的话，还可以链接到您正在谈论的FB/Google内容。我刚才说的是Facebook和Google网络摄像头界面，它们是为用户创建的，用于捕获他们的个人资料图片。我从用户体验和用户界面的角度引用了它。你可以在那里看到他们做得很好的UI。。特别是Google+的用户界面太棒了……哇！谢谢你完整的回答。我将在接下来的几周内对此进行调查，我一定会让您知道，但这正是我想要的。有几个问题：在capture.html.erb的结尾，WindowEventListeners在做什么？另外，onCapture调用webcam.save（'/product_capture'）；。。。。但我在您的应用程序中看不到这一点。@varatis我只粘贴了使此jQuery网络摄像头与您的应用程序配合使用所需的代码webcam.save（'/product\u capture'）只是一个测试，用于从回调方法将图像数据发布到

product\u capture

路径。但是，这种方式对我不起作用。只需检查一下，通过为

product\u capture

创建一个post路由，回调方法是否适用于您。别担心，我在这里发布的解决方案是有效的，如果它不适用于您，请告诉我，我可以提供我的实际代码。这有点大，有点乱，当我还是rails的新手时，我做了所有这些P@varatis我有点讨厌我自己写的糟糕的旧代码。有时我想知道，我在这里就是这么做的吗？我希望我有时间回去重新编写整个代码库：顺便说一句，这是：

窗口。addEventListener（“加载”，function（）{js}

用于在ActionScript（即画布中的Flash）发生之前添加初始图像。正如你在这个网站上看到的：白色的“X”图像。还有，

窗口。addEventListener（“调整大小”，function（）{js}

根据客户端/用户窗口的分辨率重新调整flash窗口的大小。这实际上是有意义的。@varatis您是如何将其与回形针集成的？您在

保存图像

中做了哪些更改。我想将图像上载到amazon s3或Google Drive。更正了代码，感谢您的警惕和帮助。我把它联系起来。

resources :pictures do
  collection do 
    get 'capture'
    post 'save_image'
  end
end

def save_image
  image = params[:canvas][:image]
  File.open("#{Rails.root}/public/path_you_want_to_image/image_name.png", 'wb') do |f|
    f.write(Base64.decode64(image))
  end
  # Or use paperclip to save image for a model instead!!
end

def save_image
  image = params[:capture][:image]
  File.open("#{Rails.root}/public/path_you_want_to_image/image_name.png", 'wb') do |f|
    f.write(Base64.decode64(image))
  end
  # Or use paperclip to save image for a model instead!!
end

function capture_image(){
webcam.capture();
changeFilter();
void(0);
var canvas = document.getElementById('canvas')
var context = canvas.getContext("2d");
var img     = canvas.toDataURL("image/png");
var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ;
document.getElementById('capture_images').innerHTML="<input id=\"capture_image\" type=\"hidden\" value=\""+capture_image+"\" name=\"capture[image]\">";}

function capture_image(){
webcam.capture();
changeFilter();
void(0);
var canvas = document.getElementById('canvas')
var context = canvas.getContext("2d");
var img     = canvas.toDataURL("image/png");
var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ;
document.getElementById('capture_images').innerHTML="<input id='capture_image' type='hidden' value=\'"+item_image+"\' name='capture[image]'>";}