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

所以我有一个表单，用户可以通过这种forms上传图片。 作为替代方案，我希望他们能够拍照并上传。

---

现在我认为当用户使用某种闪存网络摄像头界面拍照时，该图片需要存储在某种中间存储器中，同时用户完成他/她的表格。

有没有解决的办法？ 什么是最好的解决方案？

我认为只有两种选择。

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

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

编辑：作为一个额外的奖励，虽然它不是真正相关，我正在使用Paperclip制作Rails应用程序以获取文件附件。 另外，我更喜欢使用jQuery …

此外，来自经验丰富的UI Web开发人员的一般意见也不错..

Answer 1

我在我的rails应用程序中使用了这个： http ： //www.xarg.org/project/jquery-webcam-plugin/ ，用于从网络摄像头捕获图像。 你可以在这里下载这个jQuery-webcam： https ： //github.com/infusion/jQuery-webcam

这是一个大致完成的实现，对于凌乱的代码抱歉：

 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 

views / layouts / webcam.html.erb ：

     <%= stylesheet_link_tag :all %> <%= javascript_include_tag :defaults %> <%= javascript_include_tag "http://www.google-analytics.com/ga.js"%> <%= javascript_include_tag "http://code.jquery.com/jquery-1.4.2.min.js"%> <%= javascript_include_tag "jquery.webcam"%>  <%= csrf_meta_tag %>   <%= yield %>   

views / pictures / capture.html.erb ：

  
 
Capture image here!
 
 <%= form_for(save_image_pictures_path, :method => "post", :remote => true) do |f|%> <%= hidden_field(:item, :sku)%> 
 <%= submit_tag "Capture Image", :onClick=>"javascript:capture_image();"%> <% end %> <%= link_to "Back", root_path %> 
  
  

只需确保jquery.webcam.js中引用的“ jscam.swf ”文件正确加载到页面上。

您可以在routes.rb中定义的路由是：

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

从这里，你可以使用这个： https ： //github.com/blueimp/jQuery-File-Upload使用Ajax表单提交上传它！

如果您有任何疑问，请告诉我。

Answer 2

错误。

更换

 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="";} 

至

 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="";} 

在此之后，一切正常。

PS。 如果你得到：“capture_image（）不是fn”，请将fn名称更改为：“capture_images（）”不要忘记onClick事件的更改名称