基于layui+cropper.js实现上传图片的裁剪功能的方法

上传图片并进行裁剪是在Web开发中常见的操作之一，本文将介绍如何使用layui和cropper.js这两款前端框架来实现这一功能。

1. 准备工作

在开始之前，需要确保你已经正确引入了layui和cropper.js。其中layui为一款基于JQuery的前端UI框架，cropper.js为一款纯JavaScript的图片裁剪插件。

2. 上传图片

首先，我们需要添加一个文件选择框和一个“上传”按钮，用户选择图片后，通过点击上传按钮来实现图片的上传。

<div class="layui-upload">
  <button type="button" class="layui-btn" id="upload">上传</button>
  <input type="file" id="file" name="file" style="display: none;">
</div>

下面是上传按钮的点击事件：

layui.use('upload', function(){
  var upload = layui.upload;
  var $ = layui.jquery;
  
  //选择图片事件
  $('#upload').on('click',function(){
    $('#file').click();
  });
  //执行上传
  upload.render({
    elem: '#file' //绑定元素
    ,done: function(res){
      console.log(res); //上传成功返回值，必须是json格式
    }
  });
});

通过以上代码片段，我们实现了上传图片功能，但是上传成功后的图片并没有进行裁剪。接下来，我们将使用cropper.js来实现图片的裁剪功能。

3. 裁剪图片

为了方便操作，我们将图片显示在一个canvas画布中。下面是实现这个功能的代码：

<div class="layui-upload">
  <button type="button" class="layui-btn" id="upload">上传</button>
  <input type="file" id="file" name="file" style="display: none;">
</div>
<div class="cropper">
  <canvas id="canvas"></canvas>
</div>

接下来，我们需要使用cropper.js来对上传的图片进行裁剪。下面是实现这个功能的代码：

layui.use('upload', function(){
  var upload = layui.upload;
  var $ = layui.jquery;
  
  //选择图片事件
  $('#upload').on('click',function(){
    $('#file').click();
  });
  //执行上传
  upload.render({
    elem: '#file' //绑定元素
    ,done: function(res){
      console.log(res); //上传成功返回值，必须是json格式
      $('#canvas').attr('src', res.filepath);
      
      // 初始化cropper
      var cropper = new Cropper(document.getElementById('canvas'), {
        aspectRatio: 1, //设置裁剪框的纵横比例为1:1
        viewMode : 1,
        crop: function(e) {}
      });
    }
  });
});

通过以上代码，我们实例化了cropper对象，同时设置了裁剪框的纵横比例为1:1。下一步，我们需要添加一个“裁剪”按钮和一个“保存”按钮，用户点击“裁剪”按钮进行裁剪，点击“保存”按钮将裁剪后的图片上传到服务器。

<div class="cropper">
  <canvas id="canvas"></canvas>
</div>
<button type="button" class="btn btn-primary" id="crop">裁剪</button>
<button type="button" class="btn btn-primary" id="save">保存</button>

下面是“裁剪”按钮和“保存”按钮的点击事件：

//裁剪图片
$('#crop').on('click',function(){
    var canvas = cropper.getCroppedCanvas({
        width: 200, //设置裁剪图片的宽度
        height: 200 //设置裁剪图片的高度
    });
    var base64url = canvas.toDataURL('image/png');
    $('#canvas').attr('src', base64url);
});
//保存图片
$('#save').on('click',function(){
    var image = canvas.toDataURL('image/png');
    $.ajax({
        type: "POST",
        url: "http://localhost/api/upload",
        data: {'image': image},
        success: function(data){
            console.log(data);
        },
        error: function(data){
            console.log('error');
        }
    });
});

通过以上代码，我们实现了上传图片并进行裁剪的功能。用户选择图片后，通过点击上传按钮来上传图片，上传成功后把图片显示在画布中，并初始化cropper对象。用户可以通过移动裁剪框和调整大小来裁剪图片。点击“裁剪”按钮进行裁剪，点击“保存”按钮将裁剪后的图片上传到服务器。

总结

本文介绍了如何使用layui和cropper.js实现上传图片的裁剪功能。通过以上代码，我们成功实现了上传图片并进行裁剪的功能。实现这个功能并不难，只需要按照正确的顺序执行一系列的操作即可。同时，使用前端框架也能够大大简化开发过程，为前端开发者带来更多的便利。