可自定义的适用于Vue 2+的移动设备友好型图像裁剪器–vue-croppa

可自定义的适用于Vue 2+的移动设备友好型图像裁剪器–vue-croppa
插件名称 vue-croppa
版本号 1.3.7
发布时间 2021年1月15日
插件作者 zhanziyang

适用于Vue.js 2+应用程序的简单但功能齐全的移动友好型图像裁剪器。

安装和下载:

npm install --save vue-croppa

特征:

  • 拖放。
  • 图片预览。
  • 滚动并捏以缩放。
  • 可旋转
  • 正在加载微调器。
  • 限制最大文件大小。
  • 自动调整大小。
  • 图像翻转。
  • 有用的API。

浏览器支持

  • IE 10+
  • Firefox 3.6+
  • Chrome 6+
  • Safari 6+
  • Opera 11.5+
  • iOS Safari 6.1+
  • Android Browser 3+

范本范例

<croppa v-model="myCroppa"
        :width="400"
        :height="400"
        :canvas-color="'default'"
        :placeholder="'Choose an image'"
        :placeholder-font-size="0"
        :placeholder-color="'default'"
        :accept="'image/*'"
        :file-size-limit="0"
        :quality="2"
        :zoom-speed="3"
        :disabled="false"
        :disable-drag-and-drop="false"
        :disable-click-to-choose="false"
        :disable-drag-to-move="false"
        :disable-scroll-to-zoom="false"
        :disable-rotation="false"
        :prevent-white-space="false"
        :reverse-scroll-to-zoom="false"
        :show-remove-button="true"
        :remove-button-color="'red'"
        :remove-button-size="0"
        :initial-image="'path/to/initial-image.png'"
        @init="handleCroppaInit"
        @file-choose="handleCroppaFileChoose"
        @file-size-exceed="handleCroppaFileSizeExceed"
        @file-type-mismatch="handleCroppaFileTypeMismatch"
        @new-image-drawn="handleNewImage"
        @image-remove="handleImageRemove"
        @move="handleCroppaMove"
        @zoom="handleCroppaZoom"></croppa>