Question

我正在尝试在JSFiddle上制作网络摄像头和过滤网页应用，但是在让用户自定义过滤器所在的级别时遇到了问题。我正在使用一个文本字段，将其数据发送到JQuery变量，但无法使该变量与JQuery中的css一起使用。

这是我的代码：

＆＃13;

//building blocks
var fil = "filter";
var gry = "grayscale";
var sat = "saturate";
var opn = "(";
var cls = "%)"

$(document).ready(function() {
  var greynoVal = $('#greynoJQ').val();
});

$(document).ready(function() {
  $("#greychip").click(function() {
    $("#canvas").css(
      fil, gry + opn + greynoJQ + cls
    );
  });
});
$(document).ready(function() {
  $("#satuchip").click(function() {
    $("#canvas").css({
      "filter": "saturate(1000%)"
    });
  });
});

＆＃13;

#video {
  width: 100%;
  position: absolute;
  z-index: -2;
}

#startbutton {
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
  z-index: 1;
}

#canvas {
  border-radius: 3.5px;
  display: block;
  margin: auto;
  background-color: yellow;
  -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.5);
}

.filterChip {
  cursor: pointer;
}

.cancIC {
  cursor: pointer;
  position: relative;
  top: 2.5px;
  left: -9.5px;
  right: 0px;
  width: 5px;
  height: 5px;
}

#greyno {
  width: 100px;
}

#bottom {
  background-color: #e2e2e2;
  width: 95.25%;
  -webkit-box-shadow: 0px -11px 20px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -11px 20px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px -11px 20px -9px rgba(0, 0, 0, 0.75);
  z-index: -1;
}

＆＃13;

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.blue-light_blue.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<video id="video"></video>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="startbutton" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" value="Count"><i class="material-icons">camera_alt</i></button>
<div class="mdl-tooltip" data-mdl-for="startbutton">
  Take photo
</div>
<br>
<footer id="bottom" class="mdl-mini-footer">
</footer>
<br>
<br> &nbsp;&nbsp;
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="greysc" id="greychip">
  <input id="greysc" type="radio" class="mdl-radio__button" name="filter" value="2">
  <span class="mdl-radio__label">Greyscale</span>
</label>
&nbsp;
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" id="greyno">
  <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="greynoJQ">
  <label class="mdl-textfield__label" for="greynoJQ">Amount...</label>
  <span class="mdl-textfield__error">Not a Number!</span>
</div>
&nbsp;&nbsp;
<!--chip break-->
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="satu" id="satuchip">
  <input id="satu" type="radio" class="mdl-radio__button" name="filter" value="2">
  <span class="mdl-radio__label">Saturation</span>
</label>
<br>
<br>
<canvas id="canvas"></canvas>
<br>
<br>
<script id="jsbin-javascript">
  (function() {

    var streaming = false,
      video = document.querySelector('#video'),
      canvas = document.querySelector('#canvas'),
      photo = document.querySelector('#photo'),
      startbutton = document.querySelector('#startbutton'),
      width = 480,
      height = 270;

    navigator.getMedia = (navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia);

    navigator.getMedia({
        video: true,
        audio: false
      },
      function(stream) {
        if (navigator.mozGetUserMedia) {
          video.mozSrcObject = stream;
        } else {
          var vendorURL = window.URL || window.webkitURL;
          video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
      },
      function(err) {
        console.log("An error occured! " + err);
      }
    );

    video.addEventListener('canplay', function(ev) {
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth / width);
        video.setAttribute('width', width);
        video.setAttribute('height', height);
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        streaming = true;
      }
    }, false);

    function takepicture() {
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(video, 0, 0, width, height);
      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    }

    startbutton.addEventListener('click', function(ev) {
      takepicture();
      ev.preventDefault();
    }, false);

  })();

</script>

＆＃13;

在css中使用JQuery变量（过滤器）

0 个答案: