vue-img-cutter

#### 中文文档

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

![GitHub stars](https://github.com/acccccccb/vue-img-cutter/stargazers)
![GitHub forks](https://github.com/acccccccb/vue-img-cutter/network)
![npm](https://www.npmjs.com/package/vue-img-cutter)
![npm](https://www.npmjs.com/package/vue-img-cutter)

$3

---

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

$3

---

!Screenshot

$3

---

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

$3

---

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 :)

$3

---

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





4. Solt

html





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",

    });

}

$3

$3

$3

$3

$3

- Original picture
- Mirror

$3

!微信
!支付宝

$3

#### 3.0.7

- BugFix：No file information returned by afterChooseImg. #afterChooseImg 钩子函数

#### 3.0.6

- New prop：(modalTitle)：Modal title text #插件弹窗的标题 #86
- New prop：(afterChooseImg)：Callback after selecting an image, must return a Promise. #可以在上传图片之前回调一个 beforeUpload 函数自行对图片做限制吗？ #86
- BugFix: #Rotation operation optimization
- Optimization: Adjusted @error return value; it now returns the error type.
- Optimization: Now checks whether the file type is an image.
- Notice：onImageLoadError will be removed in future versions, please use @error instead.
- New dev dependency：prettier@2

#### 3.0.5

- New prop(onImageLoadComplete)：New Event: onImageLoadComplete #使用远程图片方法有没有办法还没加载出来之前有个 loading #85
- New prop(onImageLoadError)：New Event: onImageLoadError
- BugFix：# fix(other): 修复 canvas.toBlob 方法第二、第三个参数位置错误的情况 #84 Thanks nowo
- Update LICENSE

#### 3.0.4

- New prop(accept)：accept file type#可不可以在文件上传的 accept 中加上 webp #80

#### 3.0.3

- bugfix：#固定裁剪框位置时图片拖动优化建议 #74

#### 3.0.2

- bugfix：#note_11139264

- bugfix：#64

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

#### 3.0.1

- bugfix：#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

#### 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

#### 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.

vue-img-cutter

$3

---

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

$3

---

!Screenshot

$3

---

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

$3

---

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 :)

$3

---

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





4. Solt

html





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",

    });

}

$3

- Original picture
- Mirror

$3

!微信
!支付宝

vue-img-cutter

vue-img-cutter

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

vue-img-cutter

vue-img-cutter

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Dist Tags