vue-img-cutter-sy v0.0.4

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：

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：

1. Install

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

2. Import ImgCutter.vue：

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

3. Write the code in template：

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

4. Solt

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

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