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

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

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

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

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

• Original picture
• Mirror

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

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

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

• bugfix：#note_11139264

• bugfix：#64

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

• bugfix：#I4SDOE

• bugfix: dialog-footer default height 40px

• bugfix: width height x and y convert to int

• chore：Build tool changed to vue3

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

• Bugfix：remove this in template

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

• Bug fix: When you set rate,the control-box didn't reach the expected position #I3OXMW

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

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

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

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

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

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

• Fix bug:#21 cropPicture() missed params

• Add new hook function：onClearAll,onPrintImg,onChooseImg

• Fix bug:Button add attrib type=button

• Fix bug:Width display error

• 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;

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

• Add english documents

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

• Fix bug: Constituency overflow.

• UI optimization.

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

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

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

• Update readme.md

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

• New attribute：isModal/showChooseBtn/lockScroll

• For IE9 ,MSEdge,chrome,firefox
• UI optimization.

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

• For IE11 ,MSEdge,Chrome,Firefox

• Result add file.

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

• UI optimization.

• UI optimization.

• UI optimization.