vue-cropper
A simple picture clipping plugin for vue
Vue-cropper Related Articles Reference.。
vue全家桶开发管理后台—裁切图片 作者： 麻球科技-菅双鹏
Vue-cropper 图片裁剪的基本原理 作者： 龙恩0707
vue-cropper communication.。
Any comments, or bugs or want to develop vue-cropper together, or want to develop other plugins together
vue-cropper
Install
npm install vue-cropper
yarn add vue-cropper
Use
views
import { VueCropper } from "vue-cropper"
components: {
VueCropper,
},
main.js
import VueCropper from "vue-cropper"
Vue.use(VueCropper)
cdn
<script src="vuecropper.js"></script>
Vue.use(window['vue-cropper'])
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
></vueCropper>
not use npm or webpack
serve render nuxt, control: ssr: false
module.exports = {
...
build: {
vendor: [
'vue-cropper
...
plugins: [
{ src: '~/plugins/vue-cropper', ssr: false }
]
}
}
| name | Features | Detail | value |
| img | Picture address | null | url address || base64 || blob |
| outputSize | Crop the quality of the generated image | 1 | 0.1 - 1 |
| outputType | Crop the format of the generated image | jpg (jpg need jpeg) | jpeg || png || webp |
| info | Crop box size information | true | true || false |
| canScale | Whether the image allows the wheel to zoom | true | true || false |
| autoCrop | Whether to generate a screenshot box by default | false | true || false |
| autoCropWidth | Default generation of screenshot frame width | parent's 80% | 0~max |
| autoCropHeight | Default generation of screenshot frame Height | parent's 80% | 0~max |
| fixed | Whether to open the screenshot frame width and height fixed ratio | true | true | false |
| fixedNumber | The aspect ratio of the screenshot box | [1 : 1] | [width : height] |
| full | Screenshot of whether to output the original map scale | false | true | false |
| fixedBox | Fixed screenshot frame size is not allowed to change | false | true | false |
| canMove | Whether the uploaded image can be moved | true | true | false |
| canMoveBox | Can the screenshot box be dragged? | true | true | false |
| original | Upload images are rendered in raw scale | false | true | false |
| centerBox | Is the screenshot box restricted to the image? | false | true | false |
| high | Is it proportional to the dpi output of the device? | true | true | false |
| infoTrue | True to show the true output image width and height false show the width of the screenshot frame | false | true | false |
| maxImgSize | Limit the maximum width and height of the image | 2000 | 0-max |
| enlarge | Picture output ratio multiplier based on screenshots | 1 | 0-max(Don't be too big.) |
| mode | img render mode | contain | contain , cover, 100px, 100% auto |
Built-in method Called by this.$refs.cropper
this.$refs.cropper.startCrop() Start the screenshot
this.$refs.cropper.stopCrop() Stop the screenshot
this.$refs.cropper.clearCrop() Clear screenshot
this.$refs.cropper.changeScale() Modify the image size. The positive number becomes larger. The negative number becomes smaller.
this.$refs.cropper.getImgAxis() Get the image based on the container’s coordinate points
this.$refs.cropper.getCropAxis() Get the screenshot box based on the container’s coordinate point
this.$refs.cropper.goAutoCrop Automatically generate screenshot box functions
this.$refs.cropper.rotateRight() Rotate 90 degrees to the right
this.$refs.cropper.rotateLeft() Rotate 90 degrees to the left
Image loaded callback imgLoad returns the result success, error
Get screenshot information
this.$refs.cropper.cropW screenshot frame width
this.$refs.cropper.cropH screenshot frame height
// Get the base64 data of the screenshot
this.$refs.cropper.getCropData((data) => {
// do something
Console.log(data)
})
// Get the screenshot of the blob data
this.$refs.cropper.getCropBlob((data) => {
// do something
Console.log(data)
})
### Preview
``` html
@realTime="realTime"
// Real time preview function
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="option.img" :style="previews.img">
</div>
</div>
=
Image Move Callback Function @imgMoving
data type
{
moving: true, // moving ismove
axis: {
x1: 1, // Upper left corner
x2: 1，// Upper right corner
y1: 1，// Lower left corner
y2: 1 // Bottom right corner
}
}
Screenshot box move callback function @cropMoving
data type
{
moving: true, // moving 是否在移动
axis: {
x1: 1, // Upper left corner
x2: 1，// Upper right corner
y1: 1，// Lower left corner
y2: 1 // Bottom right corner
}
}
Update log
0.56
Fix the problem of incorrect judgment of binding events
Fix the issue that component removal does not unbind scroll events
0.55
Fix the bug that ios version less than 13.4 does not handle image rotation
0.54
` ` ` ` Remove log information Fix PC Safari low version ` ` ` `
0.53
` ` ` ` Because chrome 81 kernel and IOS 13.5 fix the image rotation bug The plug-in will not process rotation by default in the new version of browser, and it will be processed automatically in the lower version of browser https://www.chromestatus.com/feature/6313474512650240
0.52
Recall the attribute of the minimum bullet box. There is a bug in the judgment of the dragging coordinate of the bullet box
0.51
`
Update the minimum attributes of the crop box, limit the minimum area, can pass more than 1 numbers and strings, limit the length and width are so large, can also pass arrays [90,90]
limitMinSize: [Number, Array, String]
`
0.50
Support picture empty Fix ie11 ie10 not working Fix the bug that URL.createObjectURL is not destroyed after creation Add screenshot box to modify trigger event this. $ emit (‘change-crop-size’, { width: this.cropW, height: this.cropH })
0.49
Fix the default event of the scroll wheel Fix the issue of event trigger in html static file
0.48
Fix display bug of mode attribute contain and cover
Fix the problem of cross domain display of base64 pictures under ios
0.47
Fix the problem that does not trigger preview for the first time New image rendering mode function
0.46
Fix image rotation bug Fix some bugs displayed
0.45
Add multiples using enlarge
You can output clipping boxes and other proportional images.
Thank you for your contribution from [https://github.com/hzsrc].
Add preview box to various proportions, and restore image screenshots decimal problem.
0.44
fix required
Repairing the way of introduction
import { VueCropper } from vue-cropper
components: {
VueCropper,
},
main.js
import VueCropper from vue-cropper
Vue.use(vueCropper)
cdn
<script src="vuecropper.js"></script>
Vue.use(window['vue-cropper'])
V0.43
Peel off EXIF’s dependency library, add exfi-min.js to reduce code size 45.9k = 37k
Build upgrade webpack4 upgrade
` ` ` ` ` ` ` ` ` ‘.
Add Vue install method = “npm: Vue.use (VueCropper) web: Vue.use (window[‘vue-cropper’])”
` ` ` ` ` ` ` ` ` ‘.
V0.42
Repair screenshots because of the problem of removing decimal points.
V0.41
Repair boundary problem of screenshots
V0.40
The way to repair orientation
Thanks for the contribution of [Felipe Mengatto] (https://github.com/felipemengatto).
v0.40
fix orientation handel Thanks for the contribution of [Felipe Mengatto] (https://github.com/felipemengatto)
v0.39
Fix problems caused by different orientation values Thanks for the contribution of [Felipe Mengatto] (https://github.com/felipemengatto)
v0.38
Modify coordinate feedback problem
v0.37
Fix screenshot of centerBox out of 1px issue
Add screenshot Image move trigger event
v0.36
Fix rotation automatically generates screenshot box error
Modify autocrop to dynamically generate screenshot boxes
v0.35
Fix other images without compression issues
v0.34
``` provides a solution for mobile crashes Modify maxImgSize to 2000
### v0.33
``` provides a solution for mobile crashes
maxImgSize limits the maximum width and height of the image to 2000px by default.
v0.32
Add screenshot box information display
infoTrue true to show the true output image width and height false show the width of the screenshot box
v0.30
Added image coordinate function this.$refs.cropper.getImgAxis()
Added the capture box coordinate function this.$refs.cropper.getCropAxis()
Added compatibility with HD devices high
Added screenshot box to limit the function within the image centerbox
Added automatic generation of screenshot box function this.$refs.cropper.goAutoCrop
v0.29
Added callback for image loading imgLoad returns result success, error
v0.28
Fix the screenshot box fixed The screenshot box will affect the original image movement Zoom
v0.27
Mouse scaling problem optimization Img max-width style optimization New attribute CanMove can move pictures by default is yes CanMoveBox move the screenshot box by default? Original Whether to render in the original scale of the image Default is No
v0.26
Fix Firefox browser mouse zoom problem
v0.25
Fix image may not show
v0.24
Fix ios photo rotation Screenshot problem Add auto fix image Screenshot preview code change, modify default upload image as blob preview
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
v0.23
Small optimization
v0.22
New modified image size function called by this.$refs.cropper.changeScale
v0.21
Added fixed screenshot frame size fiexdBox (Note: It is best to use the automatic generation of screenshot box)
v0.20
Added output original image scale screenshot props name full, fix zoom image too large sensitivity problem
v0.19
Add image rotation to fix mac wheel over-sensitive
this.$refs.cropper.rotateRight() // Rotate 90 degrees to the right
this.$refs.cropper.rotateLeft() // Rotate 90 degrees to the left
v0.18
Fix default build screenshot box over container error
v0.17
Fix blob data acquisition error
v0.15
Add mobile phone gesture zoom
canScale: true
v0.13
Add preview
@realTime="realTime"
// Real time preview function
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="option.img" :style="previews.img">
</div>
</div>