image-cut-pc

image-cut-pc

基于vue的图片裁剪插件

使用示例

安装

// 本项是基于vue-common-admin 框架开 中间用到了service服务
// 1、在项目下安装 npm install vue-img-cutter
// 2、在项目根目录下 mkdir addons
// 3、git clone http://git.sizhijie.com/vue-addons/image-cut-pc.git image-cut-pc
// 4、在vue中组件引入的方式使用

示例

// 组件引入
import imageCutComponent 	from '../../../addons/image-cut-pc/index.vue';
import service 				from '@/service';

// 组件使用
<imageCutComponent @success="handleImageCutSuccess" @error="handleImageCutError" ref="image_cut_xxx"/>

// 定义图片裁剪成功后的方法
handleImageCutSuccess:function (filedata,params = {}) {
	console.log(filedata,params);
}
//定义图片裁剪失败的方法
handleImageCutError:function(err) {
	console.log(err)
}

//以element ui 2图片上传为例
//打开图片裁剪的方法
uploadImageHandle:async function(params) {
	let base64Image = await service.image.file2Base64(params.file);
	this.$refs.image_cut_xxx.cutOpen({name:params.file.name,src:base64Image},params);	
}

开发日志

2021年2月27日

• 完成插件单独分离功能,完成插件开发和安装示例