vueshapeimg

vueShapeImg

Picture clipping component made with vue. vue编写的图片裁剪组件

If you like, please give me a star (๑•̀ㅂ•́)و✧

如果你喜欢它，可以给我星星吗 (๑•̀ㅂ•́)و✧

English 中文文档

OnlineDemo

How to use

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

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

vueShapeImg API Doc

props

tips: You can't use imageData directly,show it in canvas putImageData

methods

tips: getImg -> imgType -> 'image/jpeg' can compress pictures better

emit

tips: You can not 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

Upgraded content

1.4.5 (2019-6-26 15:16:00)

Added the function of keeping aspect ratio scaling clipping frame and forbidding scaling clipping frame.

1.4.3 (2019-6-24 17:30:44)

Repairing drag problem in clipping frame zooming

1.4.1 (2019-5-24 09:41:00)

Fixed the problem of dragging the whole canvas when the mouseup event was triggered on the clipping box when moving the picture in the frame mode in IE browser.

1.3.4 (2019-5-15 15:17:51)

Limit the range of input parameters of setRange function

1.3.2 (2019-5-15 11:23:55)

Fixed the problem of calling the rotate function picture to return to the center of the canvas after moving the picture in frame mode

more version info