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