vue全家桶开发管理后台—裁切图片 作者： 麻球科技-菅双鹏
Vue-cropper 图片裁剪的基本原理 作者： 龙恩0707
Any comments, or bugs or want to develop vue-cropper together, or want to develop other plugins together
npm install vue-cropper
yarn add vue-cropper
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>
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 |
this.$refs.cropper.changeScale() Modify the image size. The positive number becomes larger. The negative number becomes smaller.
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>
=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
}
}
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
}
}
Fix the problem of incorrect judgment of binding events
Fix the issue that component removal does not unbind scroll events
Fix the bug that ios version less than 13.4 does not handle image rotation
Remove log information
Fix PC Safari low version
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
Recall the attribute of the minimum bullet box. There is a bug in the judgment of the dragging coordinate of the bullet box
` 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] `
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 })
Fix the default event of the scroll wheel Fix the issue of event trigger in html static file
Fix display bug of mode attribute contain and cover
Fix the problem of cross domain display of base64 pictures under ios
Fix the problem that does not trigger preview for the first time New image rendering mode function
Fix image rotation bug Fix some bugs displayed
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.
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'])
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'])"
` '.
Repair screenshots because of the problem of removing decimal points.
Repair boundary problem of screenshots
The way to repair orientation
Thanks for the contribution of [Felipe Mengatto] (https://github.com/felipemengatto).
fix orientation handel Thanks for the contribution of [Felipe Mengatto] (https://github.com/felipemengatto)
Fix problems caused by different orientation values Thanks for the contribution of [Felipe Mengatto] (https://github.com/felipemengatto)
Modify coordinate feedback problem
Fix screenshot of centerBox out of 1px issue
Add screenshot Image move trigger event
Fix rotation automatically generates screenshot box error
Modify autocrop to dynamically generate screenshot boxes
Fix other images without compression issues
Modify maxImgSize to 2000
maxImgSize limits the maximum width and height of the image to 2000px by default.
Add screenshot box information display
infoTrue true to show the true output image width and height false show the width of the screenshot box
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
Added callback for image loading imgLoad returns result success, error
Fix the screenshot box fixed The screenshot box will affect the original image movement Zoom
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
Fix Firefox browser mouse zoom problem
Fix image may not show
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>Small optimization
New modified image size function called by this.$refs.cropper.changeScale
Added fixed screenshot frame size fiexdBox (Note: It is best to use the automatic generation of screenshot box)
Added output original image scale screenshot props name full, fix zoom image too large sensitivity problem
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 leftFix default build screenshot box over container error
Fix blob data acquisition error
Add mobile phone gesture zoom
canScale: true
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>