README.md · job/vue-img-cutter

# vue-img-cutter

#### [中文文档](README-zh-CN.md)

A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size

[![GitHub stars](https://img.shields.io/github/stars/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/network)
[![npm](https://img.shields.io/npm/v/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter)
[![npm](https://img.shields.io/npm/dt/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter)

### Features：

---

-   For IE9+,MSEdge,Chrome,Firefox
-   Your can config it in line or modal
-   rotate、zoom
-   Cut to scale
-   Crop original image
-   Crop remote pictures

### Screenshot：

---

![Screenshot](https://i.bmp.ovh/imgs/2019/11/28f8a9059f089e05.png)

### Demo：

---

[https://www.ihtmlcss.com/demo/dist/#/croptool](https://www.ihtmlcss.com/demo/dist/#/croptool)

### Git：

---

Github：[https://github.com/acccccccb/vue-img-cutter](https://github.com/acccccccb/vue-img-cutter)

码云：[https://gitee.com/GLUESTICK/vue-img-cutter](https://gitee.com/GLUESTICK/vue-img-cutter)

**If this project is helpful to you, please give me a star :)**

### Usage method：

---

1. Install

```shell
npm install vue-img-cutter@2 --save-dev # for vue2
npm install vue-img-cutter@3 --save-dev # for vue3
```

2. Import ImgCutter.vue：

```javascript
import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
}
```

3. Write the code in template：

```html
<ImgCutter v-on:cutDown="cutDown"></ImgCutter>
```

4. Solt

```html
<ImgCutter v-on:cutDown="cutDown">
    <template #open>
        <button>Choose image</button>
    </template>
</ImgCutter>
```

5. This method to be compatible with IE9,it can also be used to crop cross domain images

> -   Create an object(name,src,~~width and height~~ are
>     required).

> -   this.\$refs.imgCutterModal.handleOpen(The Object).

```javascript
// 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+
};
```

```javascript
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",
    });
}
```

### Parameter description：

---

### Hook function：

### Slot（You can use slot="slot name" to custom button）：

### Return @cutDown：

---

### Development：

-   Original picture
-   Mirror

### Donation:

![微信](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png)
![支付宝](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png)

### Update log：

#### 3.0.4

-   New prop(accept)：accept file type[#可不可以在文件上传的accept 中加上webp #80](https://github.com/acccccccb/vue-img-cutter/issues/80)

#### 3.0.3

-   bugfix：[#固定裁剪框位置时图片拖动优化建议 #74](https://github.com/acccccccb/vue-img-cutter/issues/74)

#### 3.0.2

-   bugfix：[#note_11139264](https://gitee.com/GLUESTICK/vue-img-cutter#note_11139264)

-   bugfix：[#64](https://github.com/acccccccb/vue-img-cutter/issues/64)

-   New prop( quality ) : A Number between 0 and 1 indicating the image quality

#### 3.0.1

-   bugfix：[#I4SDOE](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I4SDOE)

-   bugfix: dialog-footer default height 40px

-   bugfix: width height x and y convert to int

#### 3.0.0

-   chore：Build tool changed to vue3

---

#### 2.2.6

-   New prop(accept)：accept file type[#可不可以在文件上传的accept 中加上webp #80](https://github.com/acccccccb/vue-img-cutter/issues/80)

#### 2.2.5

-   Bugfix：remove this in template

#### 2.2.4

-   New prop( toolBoxOverflow ): Allow tool box out of picture range, default: true

#### 2.2.3

-   Bug fix: When you set rate,the control-box didn't reach the expected position [#I3OXMW](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I3OXMW)

#### 2.2.2

-   New prop( imgMove ): Allow move img, default: true

#### 2.2.1

-   New prop( fileType )：Return file type, default: png

#### 2.2.0

-   New prop( index )：Return result with index.
-   New prop( previewMode )：Return results at any time,in case of performance problems, set this to false.
-   Fix Bug：Update style.

#### 2.1.10

-   New features:
-   1.saveCutPosition:Save last cut position and size
-   2.scaleAble:Able/Disable scale image

#### 2.1.9

-   Crop original image not need imageObj.width and imageObj.height

#### 2.1.8

-   New features：smallToUpload, If choose image size less then defined Size,return file. sizeChange must be false. #20

#### 2.1.7

-   Fix bug:#21 cropPicture() missed params

#### 2.1.6

-   Add new hook function：onClearAll,onPrintImg,onChooseImg

#### 2.1.5

-   Fix bug:Button add attrib type=button

#### 2.1.4

-   Fix bug:Width display error

#### 2.1.3

-   Fix bug:When no choose Image,you also can get an empty image,now you will get an error message in error callback
-   Fix bug:When rate < 0 the result image size error;

#### 2.1.2

-   New features:flip horizontal,flip vertically,Watermark
-   Add slot:ratio,scaleReset,turnLeft,turnRight,reset,flipHorizontal,flipVertically

#### 2.1.1

-   Add english documents

#### 2.1.0

-   Add new attribute:originalGraph，originalGraph
-   Fix bug: Inline mode can not scale image.

#### 2.0.30

-   Fix bug: Constituency overflow.

#### 2.0.29

-   UI optimization.

#### 2.0.28

-   Show version
-   New slot：choose/cancel/confirm
-   New attribute：toolBgc
-   Fix bug: Constituency overflow.

#### 2.0.27

-   Fix bug:Remote image in the wrong place.
-   Fix bug:An error occurred when click cancel btn in IE.
-   Fix bug:Error loading remote picture will be correctly handle.

#### 2.0.26

-   Fix bug:An error occurred when not choose any image.

#### 2.0.25

-   Update readme.md

#### 2.0.24

-   Update crop remote pictures method. eg:this.\$refs['yourComponent'].handleOpen(imgObj),imgObj must include(name,src,width,height)
-   Fix bug: Inline mode can not scale image.
-   New attribute： crossOrigin,crossOriginHeader
-   New attribute： error,It can catch error.

#### 2.0.23

-   New attribute：isModal/showChooseBtn/lockScroll

#### 2.0.22

-   For IE9+,MSEdge,chrome,firefox
-   UI optimization.

#### 2.0.21

-   For IE8+,MSEdge,chrome,firefox
-   New attribute：moveAble,sizeChange
-   Fix bug:File is not return.

#### 2.0.20

-   For IE11+,MSEdge,Chrome,Firefox

#### 2.0.19

-   Result add file.

#### 2.0.18

-   Fix bug:Reload pages when first click select image btn.

#### 2.0.17

-   UI optimization.

#### 2.0.16

-   UI optimization.

#### 2.0.15

-   UI optimization.

job/vue-img-cutter

简介

发行版

贡献者

近期动态

job/vue-img-cutter .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

job/vue-img-cutter