vue-cutter-optimize

v0.0.2

Published

4 years ago

一款简单使用的图片裁剪工具

0High
0Medium
0Low

zzzqqq20190101

vue-cutter-optimize

简单易用的vue图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。

==此插件是在原插件vue-img-cutter的基础上改进了，原插件适用于pc端，此插件适用于手机端==

特色：

兼容IE9+,MSEdge,Chrome,Firefox
两种展现形式，行内或弹窗
可旋转、缩放图片
任意比例、大小裁剪
固定比例、大小裁剪
支持远程图片裁剪、跨域设置

插件截图：

插件截图

演示地址：

https://ihtmlcss.com/demo/dist/#/croptool

项目地址：

Github：https://github.com/azhaaa/vue-cutter-optimize

原Github：https://github.com/acccccccb/vue-img-cutter

如果此项目对你有帮助，请给我一个star :)

使用方法：

安装

npm install vue-cutter-optimize --save-dev

将ImgCutter.vue文件引入项目：

import cutterOptimize from 'vue-cutter-optimize'
export default {
        components:{
            cutterOptimize
        },
...
}

在页面中使用：

<cutterOptimize v-on:cutDown="cutDown"></cutterOptimize>

可使用solt

<cutterOptimize v-on:cutDown="cutDown">
    <button slot="open">选择图片</button>
</cutterOptimize>

远程、跨域裁剪（兼容IE9）

~~需要自己写一个方法来触发裁剪工具弹出~~

~~在方法中先将图片上传至服务器，拿到返回的url后创建一个obj，然后将对象传入裁剪工具~~

只需要传入图片url和图片名称

// 传入的obj必须包含这四个属性
let obj = {
    name:'1.jpg',//远程图片名称
    src:'http://url/1.jpg',//远程图片url
    //width:200,//远程图片的原始宽度 2.1.9版本后不需要
    //height:200,//远程图片的原始高度  2.1.9版本后不需要
}

forIe9:function(){
	// 传入name，src name中必须包含后缀名
	this.$refs.imgCutterModal.handleOpen({
        name:"image.jpg",
        src:"http://imageServ.com/image.jpg",
    });
}

参数说明：

支持slot，在组件内部使用带有slot="open"属性的元素即可自定义打开组件的按钮

钩子函数：

| 属性名 | 作用 | 类型 | 必填 | 返回值 | | :---------: | :--------------------: | :------: | :--: | :----------: | | cutDown | 完成截图后要执行的方法 | Function | 是 | Object | | error | 错误回调 | Function | 否 | Error object | | onChooseImg | 选择图片后 | Function | 否 | Object | | onPrintImg | 在画布上绘制图片 | Function | 否 | Object | | onClearAll | 清空画布 | Function | 否 | null |

插槽(slot)：

返回值 @cutDown：

| 属性名 | 类型 | | :------: | :------------------------------------------: | | fileName | 文件名 | | file | file类型的文件对象（IE部分版本可能不会返回） | | blob | blob类型的文件对象（IE部分版本可能不会返回） | | dataURL | dataURL |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vue-cutter-optimize

特色：

插件截图：

演示地址：

项目地址：

使用方法：

参数说明：

钩子函数：

插槽(slot)：

返回值 @cutDown：