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

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

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