A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size
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 :)
npm install vue-img-cutter@2 --save-dev # for vue2 npm install vue-img-cutter@3 --save-dev # for vue3
import ImgCutter from 'vue-img-cutter'
export default {
components:{
ImgCutter
},
...
}
<ImgCutter v-on:cutDown="cutDown"></ImgCutter>
<ImgCutter v-on:cutDown="cutDown">
<template #open>
<button>Choose image</button>
</template>
</ImgCutter>
- 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",
});
} 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 - 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 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
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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4