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

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

Upgraded content

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

1.3.1 (2019-5-15 10:47:35)

• Adding image rotate function

1.3.0 (2019-5-13 17:25:10)

• Fixed the problem of onmouseup pollute caused by using multiple vueShapeImg on the same page and clipping box always exist

• Fixed cross-domain error multiple times triggered when using cross-domain images for cropping in normal mode

1.2.9 (2019-5-13 17:05:41)

• Fixed the problem of using timelyGetRange to report cross-domain errors in normal mode

more version info