Property | Description | Platform |
src | Picture src | All |
visible | Whether the component is visible | All |
size | Target size | All |
positionOffset | Crop box offset, the crop box defaults to the center of the container. | All |
borderWidth | Crop box border width | All |
borderColor | Crop box border color | All |
boldCornerLen | The bold length of the crop box corners. | All |
cropSizePercent | The proportion of the crop box to the crop display area, 0.9 means 90%. | All |
coverColor | Cover background color | All |
funcBtns | Function buttons ( Currently supports: upload, crop, close, around, reset.) | All |
rotateSlider | Whether to turn rotary slider ( On by default ). | All |
startAngle | Start angle of rotary slider | All |
endAngle | End angle of rotary slider | All |
gapAngle | Interval angle of rotary slider | All |
lineationItemWidth | Interval width of rotary slider ( Unit px ) | All |
borderDraw | Crop box custom border drawing function | All |
coverDraw | Crop box custom auxiliary line drawing function | All |
uploadCallback | Re-upload cropped picture callback function | All |
closeCallback | Close cropping component callback function | All |
cropCallback | Picture cropping completion callback function | |
debug | Debug mode (Turn on debugging mode will show the automatic adsorption process of picture.) | No Wechat |
title | Component title | No Wechat |
$container | Component container (If no container is set, the component will be added to the body element by default.) | No Wechat |
Method | Description | Platform |
setImage | Set crop picture | All |
initRotateSlider | Set rotary slider | All |
initFuncBtns | Set function buttons | All |
updateBox | Set crop box | All |
initBoxBorder | Set crop box border | All |
show | Show component | No Wechat |
hide | Hide component | No Wechat |
initTitle | Set title | No Wechat |
-
transformation-matrix https://github.com/chrvadala/transformation-matrix Handle the displacement transformation matrix.
-
Exif.js https://github.com/exif-js/exif-js Get image metadata.
-
prefix-umd https://github.com/newbieYoung/prefix-umd Handle css prefixes.
全平台(Vue、React、微信小程序)任意角度旋转 图片裁剪组件
https://newbieweb.lione.me/2019/05/16/simple-crop/