简单易用的vue图片裁剪插件,支持移动图像,裁剪图片,放大缩小图片,上下左右移动,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求。
A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size
https://www.ihtmlcss.com/demo/dist/#/croptool
Github:https://github.com/acccccccb/vue-img-cutter
码云:https://gitee.com/GLUESTICK/vue-img-cutter
If this project is helpful to you, please give me a star :)
npm install vue-img-cutter@2 --save-dev # for vue2
npm install vue-img-cutter@3 --save-dev # for vue3
import ImgCutter from 'vue-img-cutter'
export default {
components:{
ImgCutter
},
...
}
<ImgCutter v-on:cutDown="cutDown"></ImgCutter>
<ImgCutter v-on:cutDown="cutDown">
<template #open>
<button>Choose image</button>
</template>
</ImgCutter>
- Create an object(name,src,
width and heightare required).
- this.$refs.imgCutterModal.handleOpen(The Object).
// The object like this.
let obj = {
name: '1.jpg', //Image name
src: 'http://url/1.jpg', // Image url
//width:200,//Image width remove in 2.1.9+
//height:200,//Image height remove in 2.1.9+
};
ForIE9:function(){
// First you need create object have name,src.
// Then trigger handleOpen(obj) and deliver the obj.
this.$refs.imgCutterModal.handleOpen({
name:"image.jpg",
src:"http://imageServ.com/image.jpg",
});
}
Attribute | Effect | Type | Require | Default |
---|---|---|---|---|
isModal | Is modal | Boolean | No | true |
showChooseBtn | Show select btn | Boolean | No | true |
lockScroll | Lock scroll when modal is show | Boolean | No | true |
label | Button text | String | No | 选择图片 |
boxWidth | Tool width | Number | No | 800 |
boxHeight | Tool height | Number | No | 400 |
cutWidth | Selection box width | Number | No | 200 |
cutHeight | Selection box height | Number | No | 200 |
tool | Show toolbar | Boolean | No | true |
toolBgc | Toolbar background color | String(eg: “#fff”) | No | #fff |
sizeChange | Allow change size | Boolean | No | true |
moveAble | Allow change position | Boolean | No | true |
originalGraph | Crop original image | Boolean | No | false |
crossOrigin | Is cross origin image | Boolean | No | false |
crossOriginHeader | Set cross origin header | String | No | ’’ |
rate | Aspect ratio | String(eg: “4:3”) | No | - |
WatermarkText | Watermark Text | String | No | ’’ |
WatermarkTextFont | Watermark font size | String | No | ‘12px Sans-serif’ |
WatermarkTextColor | Watermark font color | String | No | ‘#fff’ |
WatermarkTextX | Watermark position x | Number | No | 0.95 |
WatermarkTextY | Watermark position y | Number | No | 0.95 |
smallToUpload | If choose image size less then defined Size,return file. sizeChange must be false | Boolean | No | false |
saveCutPosition | Save last cut position and size | Boolean | No | false |
scaleAble | Allow scale image | Boolean | No | true |
imgMove | Allow move image | Boolean | No | true |
toolBoxOverflow | Allow tool box out of picture range | Boolean | No | true |
index | Return with result | Any | No | null |
previewMode | Return results at any time,in case of performance problems, set this to false | Boolean | No | true |
fileType | Return file type ( png / jpeg / webp) | String | No | png |
quality | image quality | Number | No | 1 |
accept | accept file type | String | No | ‘image/gif, image/jpeg ,image/png’ |
Attribute | Effect | Type | Require | Return |
---|---|---|---|---|
cutDown | Cut down image | Function | Yes | Object |
error | Throw error | Function | No | Error object |
onChooseImg | ChooseImg | Function | No | Object |
onPrintImg | Print image to canvas | Function | No | Object |
onClearAll | Clear all | Function | No | null |
onImageLoadComplete | Image loading completed | Function | No | Object |
onImageLoadError | Image loading failed | Function | No | Object |
Slot name | Effect |
---|---|
open | Choose btn |
openImgCutter | Choose btn |
choose | Choose btn(in tool) |
cancel | Cancel btn |
confirm | Confirm btn |
ratio | Toolbar ratio |
scaleReset | Toolbar reset scale |
turnLeft | Toolbar turn left |
turnRight | Toolbar turn right |
reset | Toolbar reset |
flipHorizontal | Toolbar flip horizontal |
flipVertically | Toolbar flip vertically |
Attribute | Description |
---|---|
fileName | File name |
file | File(Some versions of IE is not support) |
blob | Blob(Some versions of IE is not support) |
dataURL | dataURL |
bugfix:#note_11139264
bugfix:#64
New prop( quality ) : A Number between 0 and 1 indicating the image quality
bugfix:#I4SDOE
bugfix: dialog-footer default height 40px
bugfix: width height x and y convert to int