Picture clipping component made with vue

vueShapeImg

Picture clipping component made with vue.

How to use

import vueShapeImg from 'vueshapeimg'
Vue.use(vueShapeImg)

<vue-shape-img></vue-shape-img>

vueShapeImg API Doc

props

Parameters Description Type Optional values Default value
useFrame Clipping pictures using marquee boxes Boolean Y false
canResizeFrame Whether the box can be scaled and moved Boolean Y true
initRange Left,Top,Width and Height of box initialization Array Y [width * 0.25, height * 0.25, width * 0.5 ,height * 0.5]
height - Number Y 500
width - Number Y 500
timelyGetRange Timely get user's select range Boolean Y false
timelyImageData Timely converting pictures that capture the user's range of choice into imageData Boolean Y false
tips: You can't use imageData directly,show it in canvas putImageData

methods

Method name Description Parameters
rotate Rotate the picture on canvas deg(Arbitrary integer)
setImgSrc Use network picture. Pictures with different domain names are best not to be used imgSrc(Picture links or Base64 files)
fileClick Use local picture -
showMask Open the mask layer, select the area -
closeMask Close the mask layer -
getRange Get the scope of user selection -
setRange Set the scope of user selection [left,top,width,height]
getImg Get pictures of the range selected by the user type('base64'/'blob'), imgType('image/jpeg' Or other image types),encoderOptions(0.00 - 1.00)
tips: getImg -> imgType -> 'image/jpeg' can compress pictures better.

emit

emit name Description
imageDataChange if props timelyImageData is true, this emit can return the imageData in timely
rangeChange if props timelyGetRange is true, this emit can return the range in timely
error error tips: -1(Picture format error), -2(Picture loading failed), -3(Pictures are cross-domain resources)
tips: You can't use imageData directly,show it in canvas putImageData

Example OnlineDemo


 <template>
   <div id="app">
     <div style="width: 500px;">
       <button @click="$refs.vueShapeImg2.fileClick()">localImg</button>
       <button @click="$refs.vueShapeImg2.setImgSrc('http://www.bqmyweb.cn/vueshapeimg/demo.png')">networkImg</button>
       <button @click="$refs.vueShapeImg2.showMask()">startCrop</button>
       <button @click="$refs.vueShapeImg2.closeMask()">endCrop</button>
       <button @click="getImg2">getImg</button>
       <button @click="$refs.vueShapeImg2.setRange([200,200,200,200])">setRange</button>
       <button @click="$refs.vueShapeImg2.rotate(10)">rotate10</button>
       <button @click="$refs.vueShapeImg2.rotate(-10)">rotate-10</button>
       <p style="font-size: 18px;font-weight: bold;">useFrame:true</p>
       <vueShapeImg @error="imgError" :height="400" :width="400" :useFrame="true" :timelyImageData="true" @imageDataChange="putImg2" ref="vueShapeImg2"></vueShapeImg>
       <canvas id="canvas2"></canvas>
     </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'app',
   data () {
     return {
       canvas2: null,
       canvas2Ctx: null
     }
   },
   mounted () {
     this.canvas2 = document.getElementById('canvas2')
     this.canvas2Ctx = this.canvas2.getContext('2d')
   },
   methods: {
     putImg2 (imgData) {
       this.canvas2Ctx.clearRect(0, 0, 500, 500)
       let obj = this.$refs.vueShapeImg2.getRange()
       this.canvas2.width = obj.w
       this.canvas2.height = obj.h
       this.canvas2Ctx.putImageData(imgData, 0, 0)
     },
     getImg2 () {
       console.log(this.$refs.vueShapeImg2.getImg('base64', 'image/jpeg', 0.7))
     },
     imgError (error) {
       console.error(error)
     },
   }
 }
 </script>

Browser support

IE10+, chrome, firefox or other modern Browser

GitHub