Question

我正在研究项目，并且允许用户从cam拍摄图像。

从cam拍摄图像后，它将图像返回为画布。我将画布转换为dataurl。

下面是我的代码。

$('#snap').on('click', function() {
  $('#myModal').modal('show');
  $('#camera_info').show();
  $('#canvas').hide();
  document.getElementById("take_pic").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 460, 480);
    $('#canvas').show();
    var dtaurl = canvas.toDataURL();
    document.getElementById('face_pic').innerHTML += dtaurl;
    if (document.getElementById('face_pic').value != '') {
      $('#snap').prop("disabled", true);
    }
  });
});

HTML

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Take Picture</h4>
      </div>
      <div class="modal-body">
        <div id="camera_info">
          <video id="video" autoplay width="460" height="480"></video>
          <canvas id="canvas" width="460" height="480"></canvas>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Save Picture</button>
        <button type="button" id="take_pic" class="btn btn-primary">Take Picture</button>
      </div>
    </div>
  </div>
</div>

问题

现在，当用户完成表单，并且数据URL保存在“ face_pic”字段中时，我现在将其上载到服务器，但是这会花费一些时间，并且会在一段时间后显示错误

504网关超时服务器没有及时响应。

为什么要花费太多时间，以及如何解决呢？有什么建议吗？

将Canvas作为Dataurl保存到服务器占用太多时间

0 个答案: