使用cropper.js裁剪头像的实例代码

使用cropper.js裁剪头像的实例代码教程：

Cropper.js是一款基于HTML5 Canvas的图片裁剪插件，可以轻松地实现图片裁剪、缩放等常用的图片处理功能，其使用也很简单。

1. 引入cropper.js文件及其样式代码

首先，在HTML文档中引入cropper.js文件及其样式代码：

<link rel="stylesheet" href="https://cdn.bootcss.com/cropper/4.0.0/cropper.min.css">
<script src="https://cdn.bootcss.com/cropper/4.0.0/cropper.min.js"></script>

1. 创建HTML代码

在body标签中创建一个包含图片的div标签和一个用于触发裁剪的按钮按钮：

<div>
  <img id="image" src="your-image.jpg">
</div>

<button id="crop-btn">裁剪</button>

1. 创建Javascript代码

添加以下Javascript代码，监听按钮的点击事件，初始化Cropper对象，实现裁剪并将结果保存到一个新的img标签中：

//获取img标签
var $image = $('#image');

//监听按钮点击事件
$('#crop-btn').click(function () {
  //获取canvas对象
  var canvas = $('#canvas')[0];

  //初始化Cropper对象
  var cropper = new Cropper($image[0], {
    //设置裁剪相关属性
    aspectRatio: 16 / 9,
    viewMode: 1,
    crop: function (e) {
      //在裁剪框内移动或调整大小时显示裁剪结果
      var data = e.detail;
      dataX = Math.round(data.x);
      dataY = Math.round(data.y);
      dataWidth = Math.round(data.width)
      dataHeight = Math.round(data.height)
      console.log(dataX + ', ' + dataY + ', ' + dataWidth + ', ' + dataHeight);
    }
  });

  //将结果保存到一个新的img标签中
  var croppedCanvas = cropper.getCroppedCanvas();
  $('#preview').append(croppedCanvas);
});

1. 示例说明

下面提供两个cropper.js的实例代码示例，供参考：

第一个示例，实现图片的放大和缩小：

//获取canvas对象
var canvas = $('#canvas')[0];

//初始化Cropper对象
var cropper = new Cropper(image, {
  autoCropArea: 0.5,
  cropBoxResizable: false,
  scalable: false,
  zoomable: false,
  zoomOnWheel: true,
  zoomOnTouch: false,
  cropBoxMovable: false,
  dragMode: 'move',
  crop: function(e) {
        var data = e.detail;
        console.log(data.x);
  }
});

//实现图片的放大和缩小功能
$('#zoomIn').click(function() {
  cropper.zoom(0.1);
});

$('#zoomOut').click(function() {
  cropper.zoom(-0.1);
});

第二个示例，将裁剪结果输出到控制台：

var cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  viewMode: 1,
  crop: function(e) {
    var data = e.detail;
    console.log(data.x + ', ' + data.y + ', ' + data.width + ', ' + data.height);
  }
});