vue-img-cutter

v3.0.4

Published

10 months ago

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

Downloads

1,306

0High
0Medium
0Low

acccccccb

image crop cutter vue 裁剪

vue-img-cutter

中文文档

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

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

Demo：

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

Git：

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

Usage method：

Install

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

Import ImgCutter.vue：

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

Write the code in template：

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

Solt

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

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

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

Parameter description：

Hook function：

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

Return @cutDown：

Development：

Original picture
Mirror

Donation:

支付宝

Update log：

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

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

2.2.6

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

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vue-img-cutter

中文文档

Features：

Screenshot：

Demo：

Git：

Usage method：

Parameter description：

Hook function：

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

Return @cutDown：

Development：

Donation:

Update log：

3.0.4

3.0.3

3.0.2

3.0.1

3.0.0

2.2.7

2.2.6

2.2.5

2.2.4

2.2.3

2.2.2

2.2.1

2.2.0

2.1.10

2.1.9

2.1.8

2.1.7

2.1.6

2.1.5

2.1.4

2.1.3

2.1.2

2.1.1

2.1.0

2.0.30

2.0.29

2.0.28

2.0.27

2.0.26

2.0.25

2.0.24

2.0.23

2.0.22

2.0.21

2.0.20

2.0.19

2.0.18

2.0.17

2.0.16

2.0.15