Vue-cropblg NPM

vue-cropblg

vue 图片裁剪插件

演示链接（戳我直达）

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/imgage	rect
position	水印位置大小角度x,y,size,angle	Array	--	'90%', '90%',1,0
textWatermark	文字水印]	String	--	--
imageWatermark	图片水印	File / String	--	--
defaultImgUrl	默认图片	File / String	--	--
angle	按钮旋转角度	Number	--	0
color	水印.编辑框.控制按钮颜色	String	16进制颜色	反差最大颜色
rotation	水图片在canvas旋转角度，能动态改变，rotateBtn为false有效	Number	--	--
penBtn	是否渲染画笔按钮	Boolean	true / false	false
revokeBtn	是否渲染撤销按钮	Boolean	true / false	false
rotateBtn	是否渲染旋转按钮	Boolean	true / false	false

补充说明

画布中的图片是支持单指拖动的，双指缩放的（画笔激活状态下手势会被禁掉）
Methods
方法名说明参数
changeImage 改变处理图片,如果没有传imgAddress,会打开本地 Function(imgAddress: String)
getImage 获取处理后图片,返回Promise,可以选择返回 base64和bolb,quality为文件压缩比(大小) Function(type:Base64 / Bolb, mimeType:image/jpeg / image/png, quality:Number)
imgLoaded 图片canvas加载完成，对调用此函数 --

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

这两个Methods 都是组件内置的：通过ref或v-model 调用

changeImage() 1. 直接调用，默认会打开本地文件选择 2.changeImage('url') 传入图片网络url 会编辑该链接图片
getImage() 1.直接调用:默认参数：getImage('Base64','image/png', 2)
type 可选值： Base64和 Bolb, mimeType 可选值：'image/jpeg' 和 'image/png', quality: 默认最佳