Question

功能性：

用户可以改变从网络摄像头拍摄的自拍图像的老化效果。因此，用户能够改变老化对拍摄的自拍照片的影响。

因此，流程将是：

用户从网络摄像头拍摄自拍照片
用户可以改变从原始图像到老年人的图像效果（想象一个90岁的老人斑点皱纹）

我做了什么：

我创建了拍照功能并将图像保存在画布上。

问题：

我从未遇到过jQuery / javascript功能，可以让我改变拍摄照片的老化效果。有一些例子，但他们都使用静态图像作为比较。在这一点上，我没有方向去做。

因此，我想就如何创建一个老化的jQuery函数寻求一些帮助/帮助，这个函数可以让我改变从网络摄像头拍摄的照片的老化外观感谢。

代码：

＆＃13;

var photobooth_selectedFrameIndex = 1;
var photobooth_snap_counter = 0;
var photobooth_isFirst = true;
var isPhotoboothType = true;

var photobooth_canvas;
var photobooth_context;
var photobooth_videoFeed;
var target_photbooth;
var target_photbooth_context;

function photobooth_snap() {

  target_photbooth = document.getElementById("target");
  target_photbooth_context = target_photbooth.getContext("2d", {
    preserveDrawingBuffer: true
  });

  $("#photobooth_snap_button").hide();
  $("#photobooth_camera_countdown").show();
  var photobooth_countdownInterval = setInterval(function() {

    //Take Photo Function

    if (photobooth_snap_counter == 0) {
      // Activate Flash from Backend Server
      ajax_flash("flash.do", "formType=flash");
      $("#photobooth_countdown_image").attr("src", "lib/img/photobooth/Ready.png");

      $("#photobooth_camera_countdown").show();
      $("#photobooth_countdown_image").show();
      setTimeout(function() {
        $("#photobooth_countdown_image").animate({
          width: "1000px"
        }, {
          queue: false,
          duration: 500
        });
        $("#photobooth_countdown_image").fadeOut({
          queue: false,
          duration: 500,
          complete: function() {
            $("#photobooth_countdown_image").css("width", "379px");
          }
        });
      }, 200);

      photobooth_snap_counter++;
    } else if (photobooth_snap_counter == 1) {
     
      $("#photobooth_countdown_image").attr("src", "lib/img/photobooth/3.png");

      $("#photobooth_countdown_image").show();
      setTimeout(function() {
        $("#photobooth_countdown_image").animate({
          width: "1000px"
        }, {
          queue: false,
          duration: 500
        });
        $("#photobooth_countdown_image").fadeOut({
          queue: false,
          duration: 500,
          complete: function() {
            $("#photobooth_countdown_image").css("width", "379px");
          }
        });
      }, 200);

      photobooth_snap_counter++;
    } else if (photobooth_snap_counter == 2) {
     
      $("#photobooth_countdown_image").attr("src", "lib/img/photobooth/2.png");

      $("#photobooth_countdown_image").show();
      setTimeout(function() {
        $("#photobooth_countdown_image").animate({
          width: "1000px"
        }, {
          queue: false,
          duration: 500
        });
        $("#photobooth_countdown_image").fadeOut({
          queue: false,
          duration: 500,
          complete: function() {
            $("#photobooth_countdown_image").css("width", "379px");
          }
        });
      }, 200);

      photobooth_snap_counter++;
    } else if (photobooth_snap_counter == 3) {
      $("#photobooth_countdown_image").attr("src", "lib/img/photobooth/Heineken_1.png");

      $("#photobooth_countdown_image").show();
      setTimeout(function() {
        $("#photobooth_countdown_image").animate({
          width: "1000px"
        }, {
          queue: false,
          duration: 500
        });
        $("#photobooth_countdown_image").fadeOut({
          queue: false,
          duration: 500,
          complete: function() {
            $("#photobooth_countdown_image").css("width", "379px");
          }
        });
      }, 200);

      photobooth_snap_counter++;
    } else if (photobooth_snap_counter == 4) {
      $("#photobooth_flash").show(function() {
        $("#photobooth_photo_stream").hide(function() {
          document.getElementById("photobooth_snap_sound").pause();
          document.getElementById("photobooth_snap_sound").currentTime = 0;
          document.getElementById("photobooth_snap_sound").play();

          $("#photobooth_camera_countdown").hide();

          photobooth_snap_counter = 0;
          clearInterval(photobooth_countdownInterval);

          photobooth_send();
          video.pause();

          $("#photobooth_photo_stream").show();
          $("#photobooth_flash").hide();

          $('#camera_option_page').fadeIn();

          stopIdleCounter = false;
        });
      });
    }
  }, 1000);
}

function photobooth_send() {
  // Send Capture Image to Backend Server
  var canvasServer = document.getElementById("target");
  var context = canvasServer.getContext("2d");
  var imageDataURL = canvasServer.toDataURL('image/png');

  var ajax = new XMLHttpRequest();
  ajax.open("POST", "image.do", false);
  ajax.setRequestHeader("Content-Type", "application/upload");
  ajax.send(imageDataURL);
}

＆＃13;

<div id="PhotoBooth" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:0px; ">
  <table cellspacing="0" cellpadding="0" width="1920px" id="photobooth_photo_stream">
    <tr>
      <td width="1920px">



        <video id="photobooth_video" style="display:none; position:absolute; left:0px; width: 1920px; height:1080px; z-index:5; transform: rotateY(180deg); transform: scale(1.0); -webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);" autoplay></video>

        <canvas id="photobooth_canvas" style="display:none;" width="1890px" height="1080px"></canvas>
        <canvas id="target" width="1920px" height="1080px"></canvas>

        <div id="photobooth_camera_countdown" style="display:none; position:absolute; z-index:6; top:60px; left:-40px; width: 1920px; heigth: 1000px; margin:auto;">
          <table cellspacing="0" cellpadding="0" width="1920">
            <tr style="height: 1000">
              <td width="1920" align="center">
                <img id="photobooth_countdown_image" src="lib/img/photobooth/Ready.png">
              </td>
            </tr>
          </table>
        </div>

        <div id="photobooth_snap_button">
          <img src="lib/img/photobooth/snap.png" class="Answer_button_animate" style="position:absolute; z-index:6; top:400px; left:570px; margin:auto;" onclick="photobooth_snap();" />
        </div>
      </td>
    </tr>
  </table>

  <table cellspacing="0" cellpadding="0" width="1920px" id="photobooth_flash" style="display:none; background-color:#FFFFFF;">
    <tr style="height: 1080px;">
      <td width="1920px"></td>
    </tr>
  </table>
</div>

＆＃13;

拍摄图像后更改图像效果

0 个答案: