1

我有一个 CropperJS 的测试平台——我已经包含了一个工作示例。它显示您的相机，当您单击拍摄快照时，它会将当前图像复制到画布。但是，我无法使以下工作：

  1. 裁剪图像时，我需要将裁剪后的图像放在画布而不是图像控件中。

  2. 我需要将上传图片从实际点击图片移动到点击上传按钮。

    <link href="Styles/bootstrap/v4.1.2/bootstrap.min.css" rel="stylesheet" />
<link href="Styles/cropper.css" rel="stylesheet" />
<link href="Styles/Site.css" rel="stylesheet" />


    <div class="row">
  <div class="col">
      <video playsinline autoplay></video>
      <canvas id="imageCanvas"></canvas>
  </div>
</div>

<div class="row">
      <button>Take snapshot</button>
      <button id="btnUploadImage">Upload Image</button>
</div>

<div class="row">   

  <label class="label" data-toggle="tooltip" title="Upload A New Image">
    <img class="rounded" id="avatar" src="./Images/Cardholders_72x72.png" alt="avatar">
    <input type="file" class="sr-only" id="input" name="image" accept="image/*">
  </label> 

  <!-- Modal -->

  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalLabel">Crop your image.</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="img-container">
            <img id="image" src="./Images/Cardholders_72x72.png">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="crop">Crop</button>
        </div>
      </div>
    </div>
  </div>   

</div>  


    <script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script src="Scripts/cropper.js"></script>

<!-- This Script is for the Cropper -->
<script>
  window.addEventListener('DOMContentLoaded', function ()
  {
    var avatar = document.getElementById('avatar');
    var image = document.getElementById('image');
    var input = document.getElementById('input');

    var $modal = $('#modal');
    var cropper;

    input.addEventListener('change', function (e)
    {
      var files = e.target.files;

      var done = function (url) {
        input.value = '';
        image.src = url;
        $modal.modal('show');
      };

      var reader;
      var file;
      var url;

      if (files && files.length > 0)
      {
        file = files[0];

        if (URL)
        {
          done(URL.createObjectURL(file));
        }
        else if (FileReader)
        {
          reader = new FileReader();
          reader.onload = function (e)
          {
            done(reader.result);
          };
          reader.readAsDataURL(file);
        }
      }
    });

    $modal.on('shown.bs.modal', function ()
    {
      cropper = new Cropper(image,
        {
        aspectRatio: 1,
        viewMode: 3
      });
    }).on('hidden.bs.modal', function ()
    {
      cropper.destroy();
      cropper = null;
    });

    document.getElementById('crop').addEventListener('click', function () {
      var initialAvatarURL;
      var canvas;

      $modal.modal('hide');

      if (cropper) {
        canvas = cropper.getCroppedCanvas({
          width: 160,
          height: 160
        });

        initialAvatarURL = avatar.src;
        avatar.src = canvas.toDataURL();  

        canvas.toBlob(function (blob)
        {
          var formData = new FormData();

          formData.append('avatar', blob, 'avatar.jpg');

        });
      }
    });
  });
</script>

<!-- This script is for the camera and snapshot -->
<script>

  'use strict';

  // Put variables in global scope to make them available to the browser console.
  const video = document.querySelector('video');
  const canvas = window.canvas = document.querySelector('canvas');
  canvas.width = 480;
  canvas.height = 360;

  const button = document.querySelector('button');

  button.onclick = function ()
  {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  };

  var constraints = {
    audio: false,
    video: {
      width: { min: 320, ideal: 320, max: 640 },
      height: { min: 400, ideal: 400, max: 480 },
      aspectRatio: { ideal: 1.25 }
    }
  };

  function handleSuccess(stream) {
    window.stream = stream; // make stream available to browser console
    video.srcObject = stream;
  }

  function handleError(error) {
    console.log('navigator.getUserMedia error: ', error);
  }

  navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);

</script>

4

0 回答 0