前端使用cropperjs优雅的实现图像裁剪

好久没更文了， 今天简单写一下实现一个小功能在一些客户端， 需要实现头像裁剪功能， 其实可以借助cropperjs快速实现我们先来cdn引入一下

<link rel="stylesheet"      href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css"><script    src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>

我们简单加一下dom元素

主要分为三部分， 按钮区域上传图片， 后期大家可以加入平面反转， 翻转多少度都是可以的， 再就是裁剪区域和裁剪后效果区域

大致就是这样一个区域我们来实现一下功能还是优先获取dom元素

  const fileinp = document.getElementById('file') // 上传 input file  const btn = document.getElementById('btn') // 上传按钮  const cropImage = document.getElementById('cropImage') // 裁剪区域图像展示  const editorSection = document.getElementById('editorSection'); // 裁剪区域  const previewContainer = document.getElementById('previewContainer'); // 预览区域  const applybtn = document.getElementById('apply-btn'); // 裁剪按钮

实现一下简单的上传

  btn.addEventListener('click', () => {    fileinp.click()  })  fileinp.addEventListener('change', () => {    const file = fileinp.files[0]    if (file) {      const reader = new FileReader()      reader.onload = function (e) {        cropImage.src = e.target.result      }      reader.readAsDataURL(file)    }  })

我们大致看一下， 文件是可以展示出来了

加一下裁剪部分

  let cropper = null;  if (cropper) {      cropper.destroy();  }  cropper = new Cropper(cropImage, {    aspectRatio: NaN,           // 裁剪框宽高比，NaN表示不限制比例，可自由调整    viewMode: 1,                // 视图模式：0-无限制，1-限制裁剪框不超出图片范围，2-限制画布不超出容器，3-限制画布不超出容器且限制裁剪框不超出图片    dragMode: 'move',           // 初始拖拽模式：'move'-移动图片，'crop'-创建新的裁剪框，'none'-无操作    autoCropArea: 0.8,          // 初始自动裁剪区域占图片面积的比例，取值范围0-1    restore: false,             // 调整窗口大小时是否恢复之前的裁剪区域    guides: true,               // 是否在裁剪框内显示辅助线（网格线）    center: true,               // 是否在裁剪框中心显示十字准星指示器    highlight: true,            // 是否高亮显示裁剪框外的区域（遮罩层）    cropBoxMovable: true,       // 是否允许拖拽移动裁剪框本身    cropBoxResizable: true,     // 是否允许调整裁剪框的大小（拖拽边框）    toggleDragModeOnDblclick: false,  // 是否通过双击在'move'和'crop'模式之间切换 });

这时候就会出现小方框供我们自由裁剪了

我们只需要移动到合适位置， 然后点击裁剪， 生成一个base64图像， 进行展示即可， 后期可以转换并上传oss， 请求接口保存oss链接即可我们现在实现一下生成base64

  applybtn.addEventListener('click', function () {    if (!cropper) return;    // 获取裁剪后的画布    croppedCanvas = cropper.getCroppedCanvas({      maxWidth: 2048,      maxHeight: 2048,    });    // 显示预览    const croppedImageUrl = croppedCanvas.toDataURL('image/png');    previewContainer.innerHTML = `<img class="preview-image" src="${croppedImageUrl}" alt="预览图片">`;  })

配置项大家可以参考下面链接

https://github.com/fengyuanchen/cropperjs/tree/v1

这样功能就实现了

今天就写到这里我们下期见