vue-cropper

[ Demo ] [ README_english ] [ ]

1.

# npm 
npm install vue-cropper

# yarn 
yarn add vue-cropper

npm

vue-cropper + vue.2x

vue-cropper@next + vue.3x

nuxt ssr: false

module.exports = {
  ...
  build: {
    vendor: [
      'vue-cropper
    ...
    plugins: [
      { src: '~/plugins/vue-cropper', ssr: false }
    ]
  }
}

2. Vue Cropper

Vue 3

npm install vue-cropper@next
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";

Vue3

import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'

const app = createApp(App)
app.use(VueCropper)
app.mount('#app')

Vue3 CDN

<style type="text/css" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.css"></style> 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-cropper@1.0.2/dist/vue-cropper.umd.js"></script>
const app = Vue.createApp({...});
app.component('vue-cropper', window['vue-cropper'].VueCropper);

Vue2

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}

Vue2

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

Vue2 CDN

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>

Vue.use(window['vue-cropper'].default)

nuxt

if(process.browser) {
  vueCropper = require('vue-cropper')
  Vue.use(vueCropper.default)
}

3.

**** mock

---

<vueCropper
  ref="cropper"
  :img="option.img"
  :outputSize="option.size"
  :outputType="option.outputType"
></vueCropper>

1. props

mock file mock

| | | --- | --- | --- | --- img | | | url , base64, blob outputSize | | 1 | 0.1 ~ 1 outputType | | jpg (jpg jpeg) | jpeg, png, webp info | | true | true, false canScale | | true | true, false autoCrop | | false | true, false autoCropWidth | | 80% | 0 ~ max autoCropHeight | | 80% | 0 ~ max fixed | | false | true, false fixedNumber | , fixed | [1, 1] | [ , ] full | | false | true, false fixedBox | | | false | true, false canMove | | true | true, false canMoveBox | | true | true, false original | | false | true, false centerBox | | false | true, false high | dpr | true | true, false infoTrue | true false | false | true, false maxImgSize | | 2000 | 0 ~ max enlarge | | 1 | 0 ~ max() mode | | contain | contain , cover, 100px, 100% auto limitMinSize | | 10 | Number, Array, String fillColor | | | #ffffff, white

2.

• @realTime
• @imgMoving
• @cropMoving
• @imgLoad , success, error

@realTime

realTime(data) {
  var previews = data
  var h = 0.5
  var w = 0.2

  this.previewStyle1 = {
    width: previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: h
  }

  this.previewStyle2 = {
    width: previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: w
  }

  //  100 
  this.previewStyle3 = {
    width: previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: 100 / preview.w
  }

  //  100 
  this.previewStyle4 = {
    width: previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: 100 / preview.h
  }
  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>
<p></p>
<div :style="previewStyle1"> 
  <div :style="previews.div">
    <img :src="previews.url" :style="previews.img">
  </div>
</div>

<p></p>
<div :style="previewStyle2"> 
  <div :style="previews.div">
    <img :src="previews.url" :style="previews.img">
  </div>
</div>

@imgMoving

{
   moving: true, // moving 
   axis: {
     x1: 1, // 
     x2: 1// 
     y1: 1// 
     y2: 1 // 
   }
 }

@cropMoving

{
   moving: true, // moving 
   axis: {
     x1: 1, // 
     x2: 1// 
     y1: 1// 
     y2: 1 // 
   }
 }

2.

this.$refs.cropper

| --- | --- this.$refs.cropper.cropW | this.$refs.cropper.cropH |

| --- | --- this.$refs.cropper.startCrop() | this.$refs.cropper.stopCrop() | this.$refs.cropper.clearCrop() | this.$refs.cropper.changeScale() | this.$refs.cropper.getImgAxis() | this.$refs.cropper.getCropAxis() | this.$refs.cropper.goAutoCrop | this.$refs.cropper.rotateRight() | 90 this.$refs.cropper.rotateLeft() | 90

base64

this.$refs.cropper.getCropData(data => {
  // do something
  console.log(data)  
})

blob

this.$refs.cropper.getCropBlob(data => {
  // do something
  console.log(data)  
})

• shn_ui - vue-cropper -
• vue - -
• Vue-cropper - 0707
• -
• vue-cropper-h5 -

bug vue-cropper