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

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