vue-croppa

网站地址:https://zhanziyang.github.io/vue-croppa/

GitHub:https://github.com/zhanziyang/vue-croppa

描述信息:基于vue直观可定制的轻量级移动友好的图像裁剪器

访问官网

GitHub

适用于Vue 2.0的简单易用的可定制移动设备图像裁剪器。这个组件只完成一件事：图片 ---> 裁剪 ---> 图片

主要特点：

直观，所见即所得
高可定制
轻量：18kb （算轻量不？哈哈哈我也不知道）
支持文件拖放 (drag and drop)
支持移动端手势

浏览器支持

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>

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/2315