简单的移动端图片裁剪vue插件[旋转，平移，缩放，印花]

Continuing the discussion from Vuex 插件 自动缓存store指定数据（配置最简，性能最佳）:

============================分割线=:joy:=============================

vue-cropblg

介绍一个图片裁剪插件：

github链接

演示链接（戳我直达）

Installation

$ npm install vue-cropblg
$ yarn add vue-cropblg
复制代码

Usage

<template>
   <crop/>
   ...
</template>

组件内引入
import { crop } from "vue-cropblg";
 ...
components: {
  crop
},
 
全局引入
import crop from "vue-cropblg";
Vue.use(crop)
复制代码

API

Attributes

参数	说明	类型	可选值	默认值
v-model	组件	Object	--	--
shape	截图形状	String	rect/arc	rect
position	水印位置大小角度[x,y,size,angle]	Array	--	['90%', '90%',1,0]
textWatermark	文字水印]	String	--	--
imageWatermark	图片水印	File / String	--	--
defaultImgUrl	默认图片	File / String	--	--
angle	控制按钮旋转角度	Number	--	反差最大颜色
color	水印.编辑框.控制按钮颜色	String	16进制颜色	反差最大颜色

Methods

方法名	说明	参数
changeImage	改变处理图片,如果没有传imgAddress,会打开本地	Function(imgAddress: String)
getImage	获取处理后图片,返回Promise,可以选择返回 base64和bolb,quality为文件压缩比(大小)	Function(type:Base64 / Bolb, mimeType:image/jpeg / image/png, quality:Number)

Slot

name	说明
placeholder	没有图片时占位图
defaultImgUrl	默认处理图片

图片在这!：