zhurui
/
management
2
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity
management/front/dkha-web-sz-main/node_modules/vue-cropper/english.md

13 KiB
Raw Blame History

vue-cropper

A simple picture clipping plugin for vue

preview 中文

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

online example

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.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

修复引入方式的问题

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

Modify maxImgSize to 2000

v0.33

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>