vue-img-cutter

简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。

Project maintained by acccccccb Hosted on GitHub Pages — Theme by mattgraham

vue-img-cutter

中文文档

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

GitHub stars GitHub forks npm npm

Features：

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：

  1. Install
npm install vue-img-cutter@2 --save-dev # for vue2
npm install vue-img-cutter@3 --save-dev # for vue3
  1. Import ImgCutter.vue：
import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
}
  1. Write the code in template：
<ImgCutter v-on:cutDown="cutDown"></ImgCutter>
  1. Solt
<ImgCutter v-on:cutDown="cutDown">
    <template #open>
        <button>Choose image</button>
    </template>
</ImgCutter>
  1. 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：

Attribute Effect Type Require Default
isModal Is modal Boolean No true
showChooseBtn Show select btn Boolean No true
lockScroll Lock scroll when modal is show Boolean No true
modalTitle Modal title text String No 图片裁剪
label Button text String No 选择图片
boxWidth Tool width Number No 800
boxHeight Tool height Number No 400
cutWidth Selection box width Number No 200
cutHeight Selection box height Number No 200
tool Show toolbar Boolean No true
toolBgc Toolbar background color String(eg: “#fff”) No #fff
sizeChange Allow change size Boolean No true
moveAble Allow change position Boolean No true
originalGraph Crop original image Boolean No false
crossOrigin Is cross origin image Boolean No false
crossOriginHeader Set cross origin header String No ’’
rate Aspect ratio String(eg: “4:3”) No -
WatermarkText Watermark Text String No ’’
WatermarkTextFont Watermark font size String No ‘12px Sans-serif’
WatermarkTextColor Watermark font color String No ‘#fff’
WatermarkTextX Watermark position x Number No 0.95
WatermarkTextY Watermark position y Number No 0.95
smallToUpload If choose image size less then defined Size,return file. sizeChange must be false Boolean No false
saveCutPosition Save last cut position and size Boolean No false
scaleAble Allow scale image Boolean No true
imgMove Allow move image Boolean No true
toolBoxOverflow Allow tool box out of picture range Boolean No true
index Return with result Any No null
previewMode Return results at any time,in case of performance problems, set this to false Boolean No true
fileType Return file type ( png / jpeg / webp) String No png
quality image quality Number No 1
accept accept file type String No ‘image/gif, image/jpeg ,image/png’
afterChooseImg Before choose image () => Promise.resolve(Boolean) No -

Hook function：

Attribute Effect Type Require Return
cutDown Cut down image Function Yes Object
error Throw error Function No Error object
onChooseImg ChooseImg Function No Object
onPrintImg Print image to canvas Function No Object
onClearAll Clear all Function No null
onImageLoadComplete Image loading completed Function No Object
onImageLoadError Image loading failed Function No Object

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

Slot name Effect
open Choose btn
openImgCutter Choose btn
choose Choose btn(in tool)
cancel Cancel btn
confirm Confirm btn
ratio Toolbar ratio
scaleReset Toolbar reset scale
turnLeft Toolbar turn left
turnRight Toolbar turn right
reset Toolbar reset
flipHorizontal Toolbar flip horizontal
flipVertically Toolbar flip vertically

Return @cutDown：

Attribute Description
fileName File name
file File(Some versions of IE is not support)
blob Blob(Some versions of IE is not support)
dataURL dataURL

Development：

Donation:

微信 支付宝

Update log：

3.0.7

3.0.6

3.0.5

3.0.4

3.0.3

3.0.2

3.0.1

3.0.0

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