shen-cai

v2.2.4

Published

3 years ago

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

Downloads

0High
0Medium
0Low

shencaizhimaya

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：

码云：https://gitee.com/li_Ss/edit-picture （代码在这儿改！！！！）

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

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

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.