如何使用cropperJS在画布中放置图像

问题描述

我是使用cropperjs库的新手。但是我在如何配置它上苦苦挣扎。

我有什么
https://jsfiddle.net/kaeqxfjL/

我需要的
我想集成一个完整的图像裁剪，您只需要在画布内拖动照片即可，而不用正方形裁剪照片。我还需要使照片的宽度适合画布的宽度，以使您不能向左/向右拖动它。您只能向上/向下拖动它。

var canvas  = $("#canvas"),context = canvas.get(0).getContext("2d"),$result = $('#result');

$('#fileInput').on( 'change',function(){
    if (this.files && this.files[0]) {
      if ( this.files[0].type.match(/^image\//) ) {
        var reader = new FileReader();
        reader.onload = function(evt) {
           var img = new Image();
           img.onload = function() {
             context.canvas.height = img.height;
             context.canvas.width  = img.width;
             context.drawImage(img,0);
             var cropper = canvas.cropper({
               aspectRatio: 16 / 9,dragMode: 'move'
             });
             
             $('#btnCrop').click(function() {
                // Get a string base 64 data url
                var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png"); 
                $result.append( $('<img>').attr('src',croppedImageDataURL) );
             });
             $('#btnRestore').click(function() {
               canvas.cropper('reset');
               $result.empty();
             });
           };
           img.src = evt.target.result;
                };
        reader.readAsDataURL(this.files[0]);
      }
      else {
        alert("Invalid file type! Please select an image file.");
      }
    }
    else {
      alert('No file(s) selected.');
    }
});

/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important,please do not ignore this! */
}

#canvas {
  height: 290px;
  width: 650px;
  background-color: #ffffff;
  cursor: default;
  border: 1px solid black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.3/cropper.css" rel="stylesheet"/>





<p>
<!-- Below are a series of inputs which allow file selection and interaction with the cropper api -->
        <input type="file" id="fileInput" accept="image/*" />
        <input type="button" id="btnCrop" value="Crop" />
        <input type="button" id="btnRestore" value="Restore" />
</p>
<div>
  <canvas id="canvas">
    Your browser does not support the HTML5 canvas element.
  </canvas>
</div>      

<div id="result"></div>
        




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.3/cropper.js"></script>

解决方法

使用类别设置图像宽度：

.img-container img {
      width: 100%;
    }

并按如下所示设置viewMode和aspectRatio。

var cropper = canvas.cropper({
                aspectRatio: 16 / 9,dragMode: 'move',viewMode: 3,aspectRatio: 1
              });

var canvas = $("#canvas"),context = canvas.get(0).getContext("2d"),$result = $('#result');

$('#fileInput').on('change',function() {
  if (this.files && this.files[0]) {
    if (this.files[0].type.match(/^image\//)) {
      var reader = new FileReader();
      reader.onload = function(evt) {
        var img = new Image();
        img.onload = function() {
          context.canvas.height = img.height;
          context.canvas.width = img.width;
          context.drawImage(img,0);
          var cropper = canvas.cropper({
            aspectRatio: 16 / 9,aspectRatio: 1

          });

          $('#btnCrop').click(function() {
            // Get a string base 64 data url
            var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
            $result.append($('<img>').attr('src',croppedImageDataURL));
          });
          $('#btnRestore').click(function() {
            canvas.cropper('reset');
            $result.empty();
          });
        };
        img.src = evt.target.result;
      };
      reader.readAsDataURL(this.files[0]);
    } else {
      alert("Invalid file type! Please select an image file.");
    }
  } else {
    alert('No file(s) selected.');
  }
});

/* Limit image width to avoid overflow the container */

img {
  max-width: 100%;
  /* This rule is very important,please do not ignore this! */
}

#canvas {
  height: 290px;
  width: 650px;
  background-color: #ffffff;
  cursor: default;
  border: 1px solid black;
}

.img-container img {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.3/cropper.css" rel="stylesheet" />





<p>
  <!-- Below are a series of inputs which allow file selection and interaction with the cropper api -->
  <input type="file" id="fileInput" accept="image/*" />
  <input type="button" id="btnCrop" value="Crop" />
  <input type="button" id="btnRestore" value="Restore" />
</p>
<div>
  <canvas id="canvas" class="img-container">
    Your browser does not support the HTML5 canvas element.
  </canvas>
</div>

<div id="result"></div>





<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.3/cropper.js"></script>