vueShapeImg


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

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

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

!Demonstration

English 中文文档

OnlineDemo

$3

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

``

$3

#### 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|
|aspectRatio|Keeping aspect ratio scaling clipping frame|Boolean|Y|false|
|disableResize|Forbidding scaling clipping frame|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 not use imageData directly,show it in canvas putImageData

$3

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

$3

#### IE10+, chrome, firefox or other modern Browser

$3

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