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 --save-dev

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">
    <button slot="open">Select image</button>
</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：

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.