前端开发框架
当前页

图片剪裁 ​

安装 ​

pnpm i @vueuse/shared

pnpm i cropperjs

二次封装组件 ​

  • 位置 src/views/demo/components/Cropper

属性说明 ​

属性类型默认值说明
srcstring-图片源
altstring-图片
circledbooleanfalse圆形裁剪框
realTimePreviewbooleantrue实时触发预览
heightstring360px高度
crossoriginstring-crossorigin
imageStyleobject``图片样式
optionsobjectDefaultOptionscorpperjs 配置项
ts
{
  aspectRatio: 1,
  zoomable: true,
  zoomOnTouch: true,
  zoomOnWheel: true,
  cropBoxMovable: true,
  cropBoxResizable: true,
  toggleDragModeOnDblclick: true,
  autoCrop: true,
  background: true,
  highlight: true,
  center: true,
  responsive: true,
  restore: true,
  checkCrossOrigin: true,
  checkOrientation: true,
  scalable: true,
  modal: true,
  guides: true,
  movable: true,
  rotatable: true,
}