分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 网络摄像头图片直接文件附件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

我认为只有两种选择.

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

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

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

解决方法

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

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

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

景色/布局/ webcam.html.erb：

<!DOCTYPE html>
<html>
<head>
  <title>Application Name</title>
  <%= 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"%>
  <script>
      !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
  </script>
  <%= csrf_Meta_tag %>
</head>
<body> 
  <%= yield %>
</body>
</html>

意见/图片/ capture.html.erb：

<div id="webcam">
   <p>Capture image here!</p>
  </div>

  <%= form_for(save_image_pictures_path,:method => "post",:remote => truE) do |f|%>
    <%= hidden_field(:item,:sku)%>
    <div id="capture_images"><input id="capture_image" type="hidden" value="" name="capture[image]"></div>
    <%= submit_tag "Capture Image",:onClick=>"javascript:capture_image();"%>  
  <% end %>     
  <%= link_to "BACk",root_path %>
   <p>
     <canvas id="canvas" width="320" height="240"></canvas>
   </p>

<script type="text/javascript">

var pos = 0;
var ctx = null;
var cam = null;
var image = null;

var filter_on = false;
var filter_id = 0;

function changeFilter() {
    if (filter_on) {
        filter_id = (filter_id + 1) & 7;
    }
}

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]\">";
}

function toggleFilter(obj) {
    if (filter_on =!filter_on) {
        obj.parentNode.style.borderColor = "#c00";
    } else {
        obj.parentNode.style.borderColor = "#333";
    }
}

  jQuery("#webcam").webcam({

    width: 320,height: 240,mode: "callBACk",swffile: "/javascripts/jscam_canvas_only.swf",onTick: function(remain) {

        if (0 == remain) {
            jQuery("#status").text("Cheese!");
        } else {
            jQuery("#status").text(remain + " seconds remaining...");
        }
    },onSave: function(data) {

        var col = data.split(";");
        var img = image;

        if (false == filter_on) {

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

        } else {

            var id = filter_id;
            var r,g,b;
            var r1 = Math.floor(Math.random() * 255);
            var r2 = Math.floor(Math.random() * 255);
            var r3 = Math.floor(Math.random() * 255);

            for(var i = 0; i < 320; i++) {
                var tmp = parseInt(col[i]);

                /* Copied some xcolor methods here to be faster than calling all methods inside of xcolor and to not serve complete library with every req */

                if (id == 0) {
                    r = (tmp >> 16) & 0xff;
                    g = 0xff;
                    b = 0xff;
                } else if (id == 1) {
                    r = 0xff;
                    g = (tmp >> 8) & 0xff;
                    b = 0xff;
                } else if (id == 2) {
                    r = 0xff;
                    g = 0xff;
                    b = tmp & 0xff;
                } else if (id == 3) {
                    r = 0xff ^ ((tmp >> 16) & 0xff);
                    g = 0xff ^ ((tmp >> 8) & 0xff);
                    b = 0xff ^ (tmp & 0xff);
                } else if (id == 4) {

                    r = (tmp >> 16) & 0xff;
                    g = (tmp >> 8) & 0xff;
                    b = tmp & 0xff;
                    var v = Math.min(Math.floor(.35 + 13 * (r + g + b) / 60),255);
                    r = v;
                    g = v;
                    b = v;
                } else if (id == 5) {
                    r = (tmp >> 16) & 0xff;
                    g = (tmp >> 8) & 0xff;
                    b = tmp & 0xff;
                    if ((r+= 32) < 0) r = 0;
                    if ((g+= 32) < 0) g = 0;
                    if ((b+= 32) < 0) b = 0;
                } else if (id == 6) {
                    r = (tmp >> 16) & 0xff;
                    g = (tmp >> 8) & 0xff;
                    b = tmp & 0xff;
                    if ((r-= 32) < 0) r = 0;
                    if ((g-= 32) < 0) g = 0;
                    if ((b-= 32) < 0) b = 0;
                } else if (id == 7) {
                    r = (tmp >> 16) & 0xff;
                    g = (tmp >> 8) & 0xff;
                    b = tmp & 0xff;
                    r = Math.floor(r / 255 * r1);
                    g = Math.floor(g / 255 * r2);
                    b = Math.floor(b / 255 * r3);
                }

                img.data[pos + 0] = r;
                img.data[pos + 1] = g;
                img.data[pos + 2] = b;
                img.data[pos + 3] = 0xff;
                pos+= 4;
            }
        }

        if (pos >= 0x4B000) {
            ctx.putImageData(img,0);
            pos = 0;
        }

    },onCapture: function () {
        webcam.save('/product_capture');

        jQuery("#flash").css("display","block");
        jQuery("#flash").fadeOut(100,function () {
            jQuery("#flash").css("opacity",1);
        });

    },debug: function (type,String) {
        jQuery("#status").html(type + ": " + String);
    },onLoad: function () {

        var cams = webcam.getCameraList();
        for(var i in cams) {
            jQuery("#cams").append("<li>" + cams[i] + "</li>");
        }
    }
});

function getPageSize() {

    var xScroll,yScroll;

    if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict,Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }

    var windowWidth,windowHeight;

    if (self.innerHeight) { // all except Explorer
        if(document.documentElement.clientWidth){
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }

    // for small pages with @R_220_10586@l height less then height of the viewport
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }

    // for small pages with @R_220_10586@l width less then width of the viewport
    if(xScroll < windowWidth){
        pageWidth = xScroll;
    } else {
        pageWidth = windowWidth;
    }

    return [pageWidth,pageHeight];
}

window.addEventListener("load",function() {

    jQuery("body").append("<div id=\"flash\"></div>");

    var canvas = document.getElementById("canvas");

    if (canvas.getContext) {
        ctx = document.getElementById("canvas").getContext("2d");
        ctx.clearRect(0,320,240);

        var img = new Image();
        img.src = "/images/rails.png";
        img.onload = function() {
            ctx.drawImage(img,129,89);
        }
        image = ctx.getImageData(0,240);
    }

    var pageSize = getPageSize();
    jQuery("#flash").css({ height: pageSize[1] + "px" });

},falsE);

window.addEventListener("resize",function() {

    var pageSize = getPageSize();
    jQuery("#flash").css({ height: pageSize[1] + "px" });

},falsE);
</script>

只需确保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表单提交上传它！

如果您有任何疑问,请告诉我.

大佬总结

以上是大佬教程为你收集整理的jquery – 网络摄像头图片直接文件附件全部内容，希望文章能够帮你解决jquery – 网络摄像头图片直接文件附件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：jquery 图片摄像头文件直接网络附件

上一篇: jquery – tablesorter不显示向上... 下一篇:如何使用jQuery使用滚动条在html...

猜你在找的jQuery相关文章

javascript – window.load&$(document).ready()与jQuery版本2和3的行为不同 2022-03-30
jquery 使用html video 2019-10-09
jQuery 语法 2019-10-09
jQuery介绍 2019-10-09
jquery – 将多个表单序列化在一起？ 2019-10-09
jQuery ajax成功的匿名函数作用域 2019-10-09
jQuery – 获取元素的第二级父级 2019-10-09
jquery清除输入默认值 2019-10-09
JQuery UI：在游标位置而不是元素的中间拖放长元素 2019-10-09
jquery – 停止$.ajax在beforeSend 2019-10-09