Skip to content
Navigation

预设模式

本插件提供了一些常用的预设模式,方便在日常的业务场景里快速使用。

类型声明

ts
/**
 * 组件 Props 的预设选项
 * @since 0.4.0
 */
export interface PresetModeOptions {
  mode?: SupportedPresetMode
  width?: number
  height?: number
}

/**
 * 组件支持的预设模式
 */
export type SupportedPresetMode =
  // 指定裁剪结果的大小
  | 'fixedSize'
  // 生成圆形裁剪结果
  | 'round'

注意事项

  1. 预设模式只提供了一些简化的配置,例如获取圆形裁剪结果原本需要繁琐的操作,使用预设模式则开箱即用,但是一些该传入的选项还是需要在 options 传入,可参考在线 demo 的源代码。
  2. 使用预设模式时, “裁剪区域” 和 “裁剪结果” 会保持一样的尺寸大小,也就是说,在预设模式里指定的 presetMode.widthpresetMode.height ,会覆盖 getDataURL 等获取结果 API 传入的 widthheight
  3. 在指定 presetMode.widthpresetMode.height 的时候,请留意宽高比例是否与 options.aspectRatio 一致,如果不一致可能得不到想要的结果。
  4. presetMode.mode 只接收 SupportedPresetMode 类型里提及到的值,传入其它将不起作用。

固定尺寸模式

可以固定裁剪区域的大小,并且获得和裁剪区域一样大的裁剪结果(这种情况下可以禁止用户修改裁剪区域大小)。

点击查看:在线演示

  • 使用方法:
  1. presetModemode 指定为 fixedSize
  2. presetModewidthheight 指定为想要的尺寸
  3. optionsdragMode 设置为 move 可以防止裁剪框被取消
  4. optionscropBoxResizable 设置为 false 可以关闭裁剪区的大小调整功能
  5. optionsaspectRatio 比例指定为 width / height 的比例
  • 例子:
html
<template>
  <vue-picture-cropper
    :boxStyle="{
      width: '100%',
      height: '100%',
      backgroundColor: '#f8f8f8',
      margin: 'auto',
    }"
    :img="pic"
    :options="{
      viewMode: 1,
      dragMode: 'move',
      aspectRatio: 1,
      cropBoxResizable: false,
    }"
    :presetMode="{
      mode: 'fixedSize',
      width: 100,
      height: 100,
    }"
  />
</template>

圆形模式

如果在用户上传头像等业务场景需要裁剪为圆形图片,可以使用该模式获取一个圆形的 PNG 图片(在这个模式下裁剪结果固定是 .png 图片)。

该模式也是固定裁剪区域的大小,并且获得和裁剪区域一样大的裁剪结果(这种情况下可以禁止用户修改裁剪区域大小)。

点击查看:在线演示

使用方法:

  • presetModemode 指定为 round
  • presetModewidthheight 指定为想要的尺寸,两个值需要一样
  • optionsdragMode 设置为 move 可以防止裁剪框被取消
  • optionscropBoxResizable 设置为 false 可以关闭裁剪区的大小调整功能
  • optionsaspectRatio 比例指定为 1
html
<template>
  <vue-picture-cropper
    :boxStyle="{
      width: '100%',
      height: '100%',
      backgroundColor: '#f8f8f8',
      margin: 'auto',
    }"
    :img="pic"
    :options="{
      viewMode: 1,
      dragMode: 'move',
      aspectRatio: 1,
      cropBoxResizable: false,
    }"
    :presetMode="{
      mode: 'round',
      width: 100,
      height: 100,
    }"
  />
</template>

Released under the MIT License.